<template>
  <div id="cardhgth" class="demo-spin-article">
    <Card>
      <div slot="title">
        <div class="edit-head">
          <a @click="goBack" class="back-title">
            <Icon type="ios-arrow-back" />返回
          </a>
        </div>
      </div>
      <!-- 头像信息 -->
      <div class="informat">
        <div
          style="display: flex; justify-content: space-between; height: 85px"
        >
          <div>
            <div class="waybillnewcarrier">
              <div class="waybillName">
                <!-- <span>托运人</span> -->
              </div>
              <div class="waybilln">
                <img
                  :src="this.waybillAvatar"
                  v-show="this.waybillAvatar != ''"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="waybiInformation">
                <div>
                  <!--  @click="LookCargoOwnerInfo()"
                    style="color: #08c; cursor: pointer" -->
                  <span>{{ this.orderInfo.companyInfoVo.contactName }}</span>
                  <span class="carriervehicleMapName">{{
                    this.orderInfo.companyInfoVo.mobile
                  }}</span>
                </div>
                <div class="waybiInf-company">
                  <span v-if="this.orderInfo.companyInfoVo.contactName != ''">
                    {{ this.orderInfo.companyInfoVo.companyName }}
                  </span>
                  <span
                    style="color: #a9a9a9"
                    v-if="
                      this.orderInfo.companyInfoVo.companyName == '' ||
                      this.orderInfo.companyInfoVo.companyName == null
                    "
                  >
                    未进行企业认证</span
                  >
                </div>
              </div>
            </div>
          </div>

          <div>
            <div class="dertiemWaybill">
              <span v-if="orderInfo.orderState == 0" class="positionS"></span>
              <!-- <span
                v-if="orderInfo.orderState != 0"
                :class="orderInfo.abnormalState == '2' ? 'urgent' : 'normal'"
              >
                {{ orderInfo.abnormalState == "2" ? "异常" : "正常" }}
              </span> -->

              <span
                :class="
                  this.orderInfo.orderState == '0'
                    ? 'implementedWay'
                    : this.orderInfo.orderState == '1'
                    ? 'implementedWay'
                    : this.orderInfo.orderState == '2'
                    ? 'implementedWay'
                    : this.orderInfo.orderState == '3'
                    ? 'AuditFailedWay'
                    : this.orderInfo.orderState == '4'
                    ? 'AuditFailedWay'
                    : this.orderInfo.orderState == '5'
                    ? 'signFor'
                    : this.orderInfo.orderState == '-1'
                    ? 'deeltesWay'
                    : 'deeltesWays'
                "
              >
                {{
                  this.$options.filters["ORDER_STATUS"](
                    this.orderInfo.orderState
                  )
                }}
              </span>
              <p style="color: #999999; width: 150px; margin-left: 10px">
                {{ this.orderInfo.createTime }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="Line"></div>
      <elDescripticons :orderInfo="orderInfo"> </elDescripticons>
      <div class="box"></div>
      <!-- 订单结算   -->

      <div>
        <div>
          <div>
            <div style="display: flex">
              <div style="width: 100%">
                <el-descriptions
                  class="margin-top"
                  title="结算信息"
                  :column="5"
                  size="medium"
                  border
                >
                  <template slot="extra"> </template>
                  <el-descriptions-item>
                    <template slot="label">配载吨位： </template>
                    <span
                      v-if="
                        orderInfo.goodWeight != '' &&
                        orderInfo.goodWeight != null
                      "
                    >
                      {{ orderInfo.goodWeight }} 吨
                    </span>
                    <span v-else> -- </span>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 装车吨位： </template>
                    <span
                      v-if="
                        orderInfo.transGoodWeight != '' &&
                        orderInfo.transGoodWeight != null
                      "
                    >
                      {{ orderInfo.transGoodWeight }} 吨
                    </span>
                    <span v-else> -- </span>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 卸车吨位： </template>
                    <span
                      v-if="
                        orderInfo.realGoodWeight != '' &&
                        orderInfo.realGoodWeight != null
                      "
                    >
                      {{ orderInfo.realGoodWeight }} 吨
                    </span>
                    <span v-else> -- </span>
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label"> 结算吨位：</template>
                    <span
                      v-if="
                        orderInfo.realGoodWeight != '' &&
                        orderInfo.realGoodWeight != null &&
                        orderInfo.transGoodWeight != '' &&
                        orderInfo.transGoodWeight != null
                      "
                    >
                      {{
                        orderInfo.realGoodWeight > orderInfo.transGoodWeight
                          ? orderInfo.transGoodWeight + " 吨"
                          : orderInfo.realGoodWeight + " 吨"
                      }}
                    </span>
                    <span v-else> -- </span>
                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label"> 支付金额： </template>
                    {{
                      orderInfo.driverTotalPrice
                        ? orderInfo.driverTotalPrice + " 元"
                        : "--"
                    }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div class="box">
              <span
                v-if="
                  orderInfo.refuseDesc != null && this.orderInfo.orderState == 4
                "
              >
                实际承运人拒绝原因：
                <span style="color: red">
                  {{ orderInfo.refuseDesc }}
                </span>
              </span>
            </div>
            <!-- 托运人 -->
          </div>
        </div>
        <!-- 订单结算 -->
        <!-- 图片 -->
        <div class="box"></div>
        <el-descriptions
          class="margin-top"
          title="单据信息"
          size="medium"
          border
        >
        </el-descriptions>
        <div class="boximg">
          <div style="margin-left: 1%">
            <Row>
              <Col span="6">
                <div class="uploadimg">
                  <div class="uploadimgss">
                    <div>
                      <img
                        style="width: 100px; cursor: pointer"
                        height="100px;"
                        :src="deliveryOrderPicUrl"
                        @click="showPic(1)"
                      /><br />
                      <!-- uploadShow替换了   -->
                      <Upload
                        v-if="
                          orderInfo.orderState == 1 ||
                          orderInfo.orderState == 2 ||
                          orderInfo.orderState == 3
                        "
                        :on-progress="LoadingBill"
                        ref="fontUpload"
                        :beforeUpload="beforeUpload"
                        :show-upload-list="false"
                        :on-success="deliveryHandleSuccess"
                        :format="['jpg', 'jpeg', 'png']"
                        :headers="header"
                        :data="{
                          fileType: 'ORDER_DELIVERY_PIC',
                          userId: userId,
                          orderId: orderId,
                        }"
                        type="drag"
                        :action="uploadOrderPicId"
                        style="
                          border-radius: 15px;
                          display: inline-block;
                          width: 30px;
                          position: relative;
                          top: -105px;
                        "
                      >
                        <div
                          style="width: 30px; height: 30px; line-height: 30px"
                        >
                          <Icon type="ios-camera" size="20"></Icon>
                        </div>
                      </Upload>
                      <div class="demo-uploadcss">
                        <template>
                          <Progress
                            v-if="LoadingBilltrue"
                            text-inside
                            :percent="load"
                            :stroke-width="3"
                          ></Progress>
                        </template>
                      </div>
                    </div>
                    <div class="l-header">
                      <span
                        style="
                          margin-left: -10px;
                          font-size: 14px;
                          display: inline-block;
                          width: 100px;
                          text-align: center;
                          margin-bottom: 5px;
                          margin-top: 80px;
                          font-weight: 800;
                        "
                      >
                        装车磅单
                      </span>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>

          <!--  -->
          <div class="row-uploadimg" style="margin-left: 20px">
            <Row>
              <Col span="6">
                <div class="uploadimg">
                  <div class="uploadimgss">
                    <div>
                      <img
                        style="width: 100px; cursor: pointer"
                        height="100px; "
                        :src="receiptOrderPicUrl"
                        @click="showPic(2)"
                      /><br />
                      <Upload
                        v-if="
                          orderInfo.orderState == 1 ||
                          orderInfo.orderState == 2 ||
                          orderInfo.orderState == 3
                        "
                        :on-progress="UnloadingList"
                        :beforeUpload="beforeUpload"
                        ref="fontUpload"
                        :show-upload-list="false"
                        :on-success="receiptHandleSuccess"
                        :format="['jpg', 'jpeg', 'png']"
                        :headers="header"
                        :data="{
                          fileType: 'ORDER_RECEIPT_PIC',
                          userId: userId,
                          orderId: orderId,
                        }"
                        type="drag"
                        :action="uploadOrderPicId"
                        style="
                          border-radius: 15px;
                          display: inline-block;
                          width: 30px;
                          position: relative;
                          top: -105px;
                        "
                      >
                        <div
                          style="width: 30px; height: 30px; line-height: 30px"
                        >
                          <Icon type="ios-camera" size="20"></Icon>
                        </div>
                      </Upload>
                      <div class="demo-uploadcss">
                        <template>
                          <Progress
                            v-if="UnloadingListtrue"
                            text-inside
                            :percent="load"
                            :stroke-width="3"
                          ></Progress>
                        </template>
                      </div>
                    </div>
                    <div class="l-header">
                      <span
                        style="
                          margin-left: -10px;
                          font-size: 14px;
                          display: inline-block;
                          width: 100px;
                          font-weight: 800;
                          text-align: center;
                          margin-bottom: 5px;
                          margin-top: 80px;
                        "
                      >
                        卸车榜单
                      </span>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
          <!--  -->
        </div>
        <span
          style="
            margin-top: 30px;
            margin-bottom: 50px;
            font-weight: 800;
            font-size: 16px;
          "
        >
        </span>
        <!-- 图片 -->
        <!-- 轨迹 -->
        <div
          v-show="orderInfo.orderState > '1' && orderInfo.orderState != '-1'"
        >
          <div class="trajectory">轨迹监控</div>
          <div>
            <div style="display: flex; justify-content: space-between">
              <div></div>
              <div>
                <span>
                  <Button
                    :loading="refreshLoading"
                    @click="refreshModal"
                    class="refreshButme"
                  >
                    <Icon type="md-refresh" />刷新
                  </Button>

                  <Button
                    :loading="alarmLoading"
                    style="margin-left: 10px"
                    class="refreshButme"
                    @click="getVehicleposition"
                    >定位</Button
                  >
                </span>
              </div>
            </div>
            <!-- 自定义导出数据 -->
            <Modal
              v-model="exportModalVisibleVehicle"
              :title="exportTitleVehicle"
              :loading="loadingExportVehicle"
              @on-ok="exportCustomDataVehicle"
            >
              <Form ref="exportForm" :label-width="100">
                <FormItem label="导出文件名">
                  <Input v-model="filenameVehicle" />
                </FormItem>
                <FormItem label="自定义导出列">
                  <CheckboxGroup v-model="chooseColumnsVehicle">
                    <Checkbox
                      v-for="(item, i) in exportColumnsVehicle"
                      :label="item.title"
                      :key="i"
                      :value="item.checked"
                      :disabled="item.disabled"
                    ></Checkbox>
                  </CheckboxGroup>
                  <FormItem label="备注">
                    <Input
                      v-model="exportRemarks"
                      placeholder="备注"
                      style="width: 300px"
                    />
                  </FormItem>
                </FormItem>
              </Form>
            </Modal>
            <div style="margin-top: -18px" class="traject demo-spin-article">
              <Tabs @on-click="trackMonitoring" v-model="trajectoryMonitor">
                <TabPane label="车辆轨迹" name="vehicleMapName">
                  <div style="margin-bottom: 10px">
                    <span>
                      <span>当前车速：{{ carspd ? carspd : "0" }}km/h</span>
                      <span style="margin-left: 10px"
                        >行驶里程：{{ carmlg ? carmlg : "0" }}km</span
                      >
                    </span>
                    <div>当前位置：{{ caraddress }}</div>
                  </div>
                  <Row>
                    <Col span="16">
                      <div class="modal-box">
                        <div
                          style="width: 100%; height: 400px"
                          id="vehicleMap"
                          class="map"
                        ></div>
                      </div>
                    </Col>
                    <Col span="8">
                      <div class="MapShow" id="chatform">
                        <!-- <Scroll  :on-reach-bottom="handleReachBottom"  :distance-to-edge="[-100,-100]" height=600>  -->
                        <div
                          class="person"
                          ref="personDom"
                          @scroll="handleScroll($event)"
                        >
                          <Timeline>
                            <div v-if="this.VehiTlerajectory.length > 0">
                              <TimelineItem
                                v-for="(activity, index) in VehiTlerajectory"
                                :key="index"
                              >
                                <span>
                                  <span
                                    :class="index == indexcss ? 'hover' : ''"
                                    >{{ activity.resul.gtm }}</span
                                  >
                                  <span
                                    :class="index == indexcss ? 'hover' : ''"
                                    style="margin-left: 5px"
                                  >
                                    {{ activity.resul.mlg }}km
                                  </span>
                                  <span
                                    :class="index == indexcss ? 'hover' : ''"
                                    style="margin-left: 5px; color: #ffa500"
                                  >
                                    {{
                                      activity.resul.parkingText != "  "
                                        ? activity.resul.parkingText
                                        : ""
                                    }}
                                  </span>
                                </span>
                                <p
                                  @click="handleChangeVideo(activity, index)"
                                  :class="index == indexcss ? 'hover' : ''"
                                  style="cursor: pointer"
                                >
                                  {{ activity.formatted_address }}
                                </p>
                              </TimelineItem>
                            </div>
                            <div v-else>暂无数据</div>
                          </Timeline>
                          <p
                            v-if="TouchThe"
                            class="content"
                            style="cursor: pointer; margin-left: 110px"
                          >
                            没有数据了,触底了~~~
                          </p>
                        </div>
                        <!-- </Scroll>-->
                      </div>
                    </Col>
                  </Row>
                </TabPane>
                <TabPane label="手机轨迹" name="mobileMapName">
                  <div style="margin-bottom: 10px"></div>
                  <Row>
                    <Col span="16">
                      <div class="modal-box">
                        <div
                          style="width: 100%; height: 400px"
                          id="mobileMap"
                          class="map"
                        ></div>
                      </div>
                    </Col>
                    <Col span="8">
                      <div class="mobilMapShow" id="mobilechatform">
                        <div
                          class="mobileperson"
                          ref="mobilepersonDom"
                          @scroll="mobilehandleScroll($event)"
                        >
                          <Timeline>
                            <div v-if="this.mobilePhoneTrack.length > 0">
                              <TimelineItem
                                v-for="(cade, indexs) in mobilePhoneTrack"
                                :key="indexs"
                              >
                                <div v-if="cade.resuls">
                                  <div>
                                    <span>
                                      {{
                                        cade.resuls.orderState == "1"
                                          ? "已接单"
                                          : cade.resuls.orderState == "2"
                                          ? "已装货"
                                          : cade.resuls.orderState == "3"
                                          ? "运输中"
                                          : cade.resuls.orderState == "4"
                                          ? "已卸货"
                                          : "已取消"
                                      }}
                                    </span>
                                    <!-- 原因 -->
                                    <span
                                      v-if="
                                        cade.resuls.journal == '' &&
                                        cade.resuls.journal == null
                                      "
                                    ></span>
                                    <span v-else>
                                      <span
                                        v-if="cade.resuls.journal == '发送成功'"
                                        style="color: #19be6b"
                                      >
                                        {{ cade.resuls.journal }}
                                      </span>
                                      <span v-else style="color: red">
                                        {{ cade.resuls.journal }}
                                      </span>
                                    </span>
                                  </div>
                                  <p>{{ cade.resuls.createTime }}</p>
                                  <div>
                                    <span>
                                      {{ cade.resuls.driverName }}
                                      {{ cade.resuls.driverPhone }}
                                      {{ cade.resuls.vehicleNum }}
                                    </span>
                                  </div>
                                  <div>
                                    <span>
                                      {{ cade.formatted_address }}
                                    </span>
                                  </div>
                                </div>
                              </TimelineItem>
                            </div>
                            <div v-else>暂无数据</div>
                          </Timeline>
                          <p
                            v-if="mobilTouchThe"
                            class="content"
                            style="cursor: pointer; margin-left: 110px"
                          >
                            没有数据了,触底了~~~~
                          </p>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </TabPane>
              </Tabs>
              <Spin size="large" fix v-if="spinShow"></Spin>
            </div>
          </div>
        </div>
      </div>
      <!-- 报警详情 -->
      <Drawer :title="choutiText" width="1200" v-model="alarmDetailsDrawer">
        <Table
          :loading="loading"
          :columns="mingxititle"
          :data="mingxidata"
          ref="table"
        >
        </Table>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="exportSelectData">导出明细</Button>
        </div>
      </Drawer>
      <!--  -->
      <!-- 自定义导出数据 -->
      <Modal
        v-model="exportModalVisible"
        :title="exportTitle"
        :loading="loadingExport"
        @on-ok="exportCustomData"
      >
        <Form ref="exportForm" :label-width="100">
          <FormItem label="导出文件名">
            <Input v-model="filename" />
          </FormItem>
          <FormItem label="自定义导出列">
            <CheckboxGroup v-model="chooseColumns">
              <Checkbox
                v-for="(item, i) in exportColumns"
                :label="item.title"
                :key="i"
                :value="item.checked"
                :disabled="item.disabled"
              ></Checkbox>
            </CheckboxGroup>
            <FormItem label="备注">
              <Input
                v-model="exportRemarks"
                placeholder="备注"
                style="width: 300px"
              />
            </FormItem>
          </FormItem>
        </Form>
      </Modal>
      <!-- 轨迹 -->
    </Card>
    <!-- 按钮 -->
    <div class="Cardokbtn">
      <div class="okbtn">
        <div style="margin-left: 40px">
          <div style="display: flex; justify-content: space-between">
            <div>
              <!-- -1 '已取消'  0待接单' 1待装货' 2运输中' 3待审核' 4已签收' 5已完成' -->

              <!-- v-if="orderInfo.orderState == 4 && this.$route.query.pageType == 5"  -->
              <span
                v-if="
                  orderInfo.orderState == 3 && this.$route.query.pageType == 5
                "
              >
                <Button type="primary" @click="tranOrder">订正吨位</Button>
                &nbsp;
              </span>
              &nbsp;
              <span
                v-if="orderInfo.orderState >= 0 && orderInfo.orderState < 3"
              >
                <Button type="error" @click="cancle">取消运单</Button>
                &nbsp;</span
              >
              <Button @click="waybillDocumentary">处理日志</Button>
              <span>
                <span
                  v-if="
                    (orderInfo.orderState == '1' &&
                      orderInfo.addressFence == '0') ||
                    (orderInfo.orderState == '2' &&
                      orderInfo.addressFence == '0')
                  "
                >
                  &nbsp;
                  <Button
                    type="primary"
                    :loading="loadingopenFence"
                    @click="openFence"
                    >开启围栏</Button
                  >
                </span>

                <span
                  v-if="
                    (orderInfo.orderState == '1' &&
                      orderInfo.addressFence != '0') ||
                    (orderInfo.orderState == '2' &&
                      orderInfo.addressFence != '0')
                  "
                >
                  &nbsp;
                  <Button
                    type="error"
                    :loading="loadingopencloseFence"
                    @click="closeFence"
                    >关闭围栏</Button
                  >
                </span>
              </span>
              <span
                v-if="
                  orderInfo.orderState == 4 && this.$route.query.pageType == 5
                "
              >
                &nbsp;
                <Button
                  type="primary"
                  :loading="loadingReturne"
                  @click="returnModification"
                  >退回修改</Button
                >
              </span>
            </div>

            <div style="margin-right: 40px; display: flex">
              <div>
                <span
                  v-if="
                    (orderInfo.orderState == 3 &&
                      this.$route.query.pageType == 5) ||
                    (orderInfo.orderState == 4 &&
                      this.$route.query.pageType == 5)
                  "
                >
                  <Button type="warning" @click="onNext">
                    {{ this.orderInfo.orderState | ORDER_STATE }}
                  </Button>
                </span>
              </div>
              &nbsp; &nbsp;
            </div>
            <div
              v-if="orderInfo.orderState == -1"
              style="padding-bottom: 10px; padding-right: 30px"
            >
              <span>取消原因：</span>
              <span class="cancellation">{{ orderInfo.orderStateDesc }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--添加处理日志  -->
    <Modal
      v-model="documentaryRecordModal"
      title="处理日志"
      width="600"
      :styles="{ top: '100px' }"
    >
      <div>
        <div>
          <div class="comment-container">
            <div class="ontain">
              <div v-if="waybillRecordList.length < 1">暂无数据</div>
              <div
                class="listItem"
                v-for="(item, index) in waybillRecordList"
                :key="`tousu${index}`"
              >
                <div style="display: flex; word-break: break-all">
                  <div
                    style="width: inherit; display: block; white-space: normal"
                  >
                    [{{ item.name }}] [{{ item.createTime }}] {{ item.content }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="Signcss">
          <div style="display: flex; margin-top: 15px">
            <div class="contentInput">
              <Input
                type="textarea"
                style="width: 400px"
                v-model="documentaryRecord"
                placeholder="请输入处理日志"
                rows="2.4"
                :autosize="{ minRows: 2.4, maxRows: 5 }"
              >
              </Input>
            </div>
            <!--  -->
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button
          type="primary"
          :loading="documentarybtn"
          @click="documentaryPreservation"
          >保存</Button
        >
      </div>
    </Modal>
    <div class="tranModalCss">
      <Modal
        width="1500"
        v-model="tranModal"
        :title="revisedTitle"
        @on-cancel="cancel"
        :styles="{ top: '20px' }"
      >
        <div style="display: flex">
          <div class="modifyTonnage">
            <Table :columns="tranColumns" :data="tableData2"></Table>
          </div>
          <div class="modifyTonnage">
            <Table :columns="realColumns" :data="tableData2"></Table>
          </div>
        </div>
        <div>
          <viewer :images="preImgList" :options="options">
            <div style="display: flex">
              <div v-for="(src, index) in preImgList" :key="index">
                <div :class="index == 1 ? 'mal1' : 'mal'">
                  <div class="viewer-img-title">{{ src.tiem }}</div>
                  <div class="imgpod">
                    <img
                      :src="src.img"
                      :id="index + 'hengben'"
                      class="imgboxele"
                    />
                    <span @click="xuanzhuan(index + 'hengben')">
                      <i class="el-icon-refresh-right frueshe-css"></i>//旋转
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div
              ref="nodata"
              style="text-align: center; margin-top: 100px"
              v-if="!preImgList.length"
            >
              暂无数据
            </div>
          </viewer>
        </div>
        <div slot="footer">
          <Button :loading="tranLoading" @click="modifyTranClick" type="primary"
            >保存</Button
          >
        </div>
      </Modal>
    </div>
    <!--  -->
    <Modal width="60%" v-model="changeAddress" :title="changeAddresstitle">
      <div style="margin: 0 0 20px 0">
        <DatePicker
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          placement="bottom-end"
          v-model="changeDate"
          placeholder="请选择时间"
          style="width: 200px"
          @on-change="timeschange"
        ></DatePicker>
      </div>
      <div class="modal-box">
        <div style="height: 300px" id="containerAddress" class="map">
          <div id="pickerBoxadd">
            <input
              id="pickerInputthree"
              placeholder="输入关键字选取地点"
              autocomplete="off"
            />
            <div id="poiInfo"></div>
          </div>
        </div>

        <div id="right">
          <div style="display: none">
            <div>
              <div class="title">选择模式</div>
              <Input type="radio" name="mode" value="dragMap" checked
                >拖拽地图模式</Input
              >
              <br />
              <Input type="radio" name="mode" value="dragMarker"
                >拖拽Marker模式</Input
              >
            </div>
            <div>
              <button id="start">开始选点</button>
              <button id="stop">关闭选点</button>
            </div>
          </div>
          <div style="margin: 20px 0 0 0">
            <div class="title">选址结果</div>
            <div class="c">
              经纬度：
              <span id="lnglatAddress"></span>
            </div>
            <div class="c">
              地址：
              <span id="addressadd"></span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="changedetail" :loading="detaiLoading" type="primary"
          >确定</Button
        >
      </div>
    </Modal>
    <Modal v-model="cancleOrderModel" title="取消运单">
      <Form :label-width="80">
        <FormItem label="取消原因">
          <Input
            type="textarea"
            :rows="4"
            v-model="cancleOrderDesc"
            placeholder="请输入取消原因"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button
          @click="cancleOrderClick"
          :loading="cancleLoading"
          type="primary"
          >确定</Button
        >
      </div>
    </Modal>
    <Modal v-model="documentApprovals" title="单据审核" width="400">
      <div v-if="unloadings">
        <div style="display: flex">
          <div>
            <span class="tile_css">装货磅单</span>
            <div v-if="deliveryOrderPicUrl">
              <img
                @click="showPics(deliveryOrderPicUrl)"
                :src="deliveryOrderPicUrl"
                alt="无效的图片链接"
                style="
                  width: 100px;
                  height: 100px;
                  margin: 0 auto;
                  display: block;
                  border: 1px solid #a9a9a9;
                "
              />
            </div>
            <div
              v-else
              style="
                width: 100px;
                height: 100px;
                margin: 0 auto;
                display: block;
                border: 1px solid #a9a9a9;
              "
            ></div>
          </div>
          <div style="margin-left: 100px">
            <span class="tile_css">人货合照</span>
            <div v-if="manGoodsOrderPicUrl">
              <img
                @click="showPics(manGoodsOrderPicUrl)"
                :src="manGoodsOrderPicUrl"
                alt="无效的图片链接"
                style="
                  width: 100px;
                  height: 100px;
                  margin: 0 auto;
                  display: block;
                  border: 1px solid #a9a9a9;
                "
              />
            </div>
            <div
              v-else
              style="
                width: 100px;
                height: 100px;
                margin: 0 auto;
                display: block;
                border: 1px solid #a9a9a9;
              "
            ></div>
          </div>
          <!--      
          <div style="margin-left: 40px">
            <span class="tile_css">装货吨数</span>
            <div>{{ this.orderInfo.transGoodWeight }} 吨</div>
          </div> -->
        </div>
        <div style="margin-top: 20px">
          <span>
            <Button type="primary" @click="loadingReviewAdopt">审核通过</Button>
            &nbsp;
            <Button type="error" @click="loadingReviewFail">审核不通过</Button>
          </span>
        </div>
      </div>
      <!-- <div style="width: 100%; height: 30px"></div> -->
      <div v-if="!unloadings">
        <div style="display: flex">
          <div>
            <span class="tile_css">卸货磅单</span>
            <div v-if="receiptOrderPicUrl">
              <img
                @click="showPics(receiptOrderPicUrl)"
                :src="receiptOrderPicUrl"
                alt="无效的图片链接"
                style="
                  width: 100px;
                  height: 100px;
                  margin: 0 auto;
                  display: block;
                  border: 1px solid #a9a9a9;
                "
              />
            </div>
            <div
              v-else
              style="
                width: 100px;
                height: 100px;
                margin: 0 auto;
                display: block;
                border: 1px solid #a9a9a9;
              "
            ></div>
          </div>
          <div style="margin-left: 100px">
            <span class="tile_css">人车合照</span>
            <div v-if="manCarOrderPicUrl">
              <img
                @click="showPics(manCarOrderPicUrl)"
                :src="manCarOrderPicUrl"
                alt="无效的图片链接"
                style="
                  width: 100px;
                  height: 100px;
                  margin: 0 auto;
                  display: block;
                  border: 1px solid #a9a9a9;
                "
              />
            </div>
            <div
              v-else
              style="
                width: 100px;
                height: 100px;
                margin: 0 auto;
                display: block;
                border: 1px solid #a9a9a9;
              "
            ></div>
          </div>
          <!-- <div style="margin-left: 40px">
            <span class="tile_css">卸货吨数</span>
            <div>{{ this.orderInfo.realGoodWeight }} 吨</div>
          </div> -->
        </div>
        <div style="margin-top: 20px">
          <span>
            <Button type="primary" @click="unloadingAuditAdopt"
              >审核通过</Button
            >
            &nbsp;
            <Button type="error" @click="unloadingAuditFail">审核不通过</Button>
          </span>
        </div>
      </div>
      <div slot="footer"></div>
    </Modal>
    <!-- 审核不审核通过 -->
    <Modal v-model="AuditFailedModal" title="审核不通过">
      <Input
        v-model="AuditFailedInput"
        type="textarea"
        :rows="4"
        placeholder="请输入审核不通过原因"
      />
      <div slot="footer">
        <Button @click="AuditFailedModal = false">取消</Button>
        <Button
          :loading="loadingbut"
          type="primary"
          @click="AuditRejectDetermine"
          >确定</Button
        >
      </div>
    </Modal>
    <!-- 拒绝运单 -->
    <Modal v-model="rejectModal" title="拒绝结算">
      <Input
        style="margin-top: 10px"
        v-model="rejecInputs"
        type="textarea"
        :rows="4"
        placeholder="请输入拒绝运单原因"
      />
      <div slot="footer">
        <Button @click="rejectModal = false">取消</Button>
        <Button :loading="loadingbut" type="primary" @click="rejectModalClick"
          >确定</Button
        >
      </div>
    </Modal>
    <!-- 货主详情 -->
    <OwnerDetails
      @OwnerDetaiEnd="OwnerDetaiEnd"
      :OwnerDetailsId="OwnerDetailsId"
      :OwnerDetailsModalue="this.OwnerDetailsModalue"
    >
    </OwnerDetails>
    <!--  -->
    <div>
      <Modal v-model="selectModal" title="确认接单" center>
        <div>
          <div class="waiting_div">
            <span class="div_title">货品名称：</span>
            <span class="div_nr">{{ orderInfo.goodSubType }}</span>
          </div>
          <div class="waiting_div">
            <span class="div_title">托运单号：</span>
            <span class="div_nr">{{ orderInfo.orderNo }}</span>
          </div>
          <div class="waiting_div">
            <span class="div_title">运输路线：</span>
            <span class="div_nr"
              >{{ orderInfo.beginAreaName }}—{{ orderInfo.endAreaName }}</span
            >
          </div>
          <div class="waiting_div">
            <span v-if="this.orderInfo.pricingType == '1'">
              <span class="div_title">运费单价：</span>
              <span style="color: #468847" class="div_nr"
                >{{
                  orderInfo.driverUnitPrice != "" &&
                  orderInfo.driverUnitPrice != null
                    ? orderInfo.driverUnitPrice.toFixed(2)
                    : ""
                }}
              </span>
              元/吨
            </span>
            <span v-else>
              <span class="div_title">运费总价：</span>
              <span style="color: #468847" class="div_nr">{{
                orderInfo.driverTotalPrice != "" &&
                orderInfo.driverTotalPrice != null
                  ? orderInfo.driverTotalPrice.toFixed(2)
                  : ""
              }}</span>
              元
            </span>
          </div>
          <div class="waiting_div">
            <span class="div_title">配载数量：</span>
            <span class="div_nr"
              >{{
                orderInfo.goodWeight != "" && orderInfo.goodWeight != null
                  ? orderInfo.goodWeight
                  : ""
              }}
              吨</span
            >
          </div>
          <div>
            <span>选择车辆：</span>
            <span class="div_Select">
              <Select
                v-model="vehicleLicenseForm.userId"
                filterable
                @on-change="changeDriver"
                style="width: 220px"
              >
                <Option
                  v-for="(item, index) in getUnboundDriver"
                  :key="index"
                  :value="item.driverId"
                  >{{ item.driverName }} {{ item.vehicleNum }}
                  {{ item.approvedLoad }}吨</Option
                >
              </Select>
            </span>
          </div>
        </div>
        <div slot="footer">
          <Button :loading="loadingbut" type="primary" @click="orderReceiving()"
            >接单</Button
          >
        </div>
      </Modal>
    </div>
    <Modal
      width="800"
      v-model="curMapAddress"
      title="车辆当前位置"
      @on-cancel="cancel"
    >
      <div style="margin-bottom: 10px">
        <div>定位车辆：{{ carVehicle }}</div>
        <div>当前车速：{{ carspd }}km/h</div>
        <div>定位时间：{{ carTime }}</div>
        <div>当前位置：{{ caraddress }}</div>
      </div>
      <div class="modal-box">
        <div style="width: 100%; height: 400px" id="themap" class="map"></div>
      </div>
      <div slot="footer">
        <!-- <Button @click="ok" type="primary">保存</Button> -->
        <Button @click="curMapAddress = false" style="margin-left: 8px"
          >取消</Button
        >
      </div>
    </Modal>
    <!--  -->
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
import {
  saveDetails,
  getOrderVoInfo,
  changeOrderState,
  uploadOrderInfo,
  getTracks,
  getMobileTrack,
  saveOrderExtend,
  updateOrderExtend,
  documentApproval,
  getPcFreeJoinDriverVo,
  pcDdistributeLeaflets,
  orderInvoicingEtc,
  getOrderAdjustmentList, // 返回运单金额调整明细
  deleteOrderAdjustment, // 删除运单金额调整明细
  saveOrderAdjustment, // 保存运单金额调整明细
  updateAddressFence, // 改变运单地址围栏状态
} from "@/api/order";
import {
  uploadOrderPicId,
  Gaudemap,
  uploadComplaintPicId,
  orderaddDocumentary,
  getDocumentaryListOrder,
  uploadInsurePicId,
  previewSettlementSheet,
  updateStatisticsDetails,
  addDownloadRecord,
} from "@/api/index";
import {
  vehicleposition, //车辆位置
} from "@/api/monitoring";
import GPS from "@/libs/GPS";
import { alarmInformationList } from "@/api/monitoring";
import { getStore, setStore } from "@/libs/storage";
import beginImg from "@/assets/begin_icon.png";
import endImg from "@/assets/end_icon.png";
import Map_location from "@/assets/Map_location.png";
import * as imageConversion from "image-conversion";
import axios from "axios";
import excel from "@/libs/excel";
// 根据你的实际请求api.js位置路径修改
import OwnerDetails from "@/views/componentsonn_source_goods/OwnerDetails";
import defaultAvatar from "@/assets/customer.png";
import elDescripticons from "@/views/componentsonn_source_goods/el_descripticons";
import expandRow from "./table-expand.vue";
import { el } from "date-fns/locale";
export default {
  data() {
    return {
      spinShow: false,
      curMapAddress: false, //车辆弹框
      mapVehic: null,
      marker: null,
      caraddress: "",
      carspd: "",
      carVehicle: "",
      carTime: "",
      // 已配置
      dialogVisible: false,
      configureForm: {
        pageNumber: 1,
        pageSize: 5,
        sort: "",
        order: "",
        total: 0,
        companyId: "671",
      },
      ruleListData: [], //运费调整明细列表
      companyList: [], //结算信息货主列表
      driverList: [], //结算信息驾驶员列表
      companyListIndex: 0,
      driverListIndex: 0,
      preImgList: [],
      viewerTitle: [],
      revisedTitle: "",

      rejectModal: false,
      rejecInputs: "",

      getUnboundDriver: [],
      selectModal: false,
      // 选择驾驶员车辆
      vehicleLicenseForm: {
        userId: "",
      },
      disabledGroup: "2",
      shipperDisabledGroup: "2",
      electronicWaybill: false,
      waybillData: {
        companyInfoVo: {},
        vehicleInfoVo: {},
        driverInfoVo: {},
        platformInfoVo: {},
        transportationVo: {
          certNo: "",
          affiliatedCompanyName: "",
        },
        ownerUserVo: {
          certNo: "",
          affiliatedCompanyName: "",
        },
        individualUserVo: {
          roadPermitNo: "",
          individualName: "",
        },
      },
      auditFailedModal: false,
      AuditFailedInputs: "",
      loadingbut: false, //按钮的加载效果
      AuditFailedModal: false, //审核不审核通过的弹框
      AuditFailedInput: "", //审核不审核通过的原因
      OwnerInformationModal: false, //货主详细信息弹框

      documentApprovals: false,
      unloadings: true,
      picVisible: false, // 图片预览
      infoForm: {},

      uploadShow: false,

      defaultAvatar: defaultAvatar, //默认头像
      // 订正结算价
      settlementTitle: "调整托运人结算价",
      formRevised: {
        platformUnitPrice: "",
        platformTotalPrice: "",
        driverUnitPrice: "",
        driverTotalPrice: "",
        cargoOwnerAdjustment: "",
        estimateAmt: "",
        damageCargo: "",
        sfreightFee: "",
        rfreightFee: "",
        amount: "",
        driverDamageCargo: "",
        driverRfreightFee: "",
        driverSfreightFee: "",
        driverAmount: "",

        transGoodWeight: "",
        realGoodWeight: "",

        refreshLoading: false,
        alarmLoading: false,

        etcCargo: 0,
        oilcostCargo: 0,
        adjustment: 0,
      },
      ruleRevised: {
        driverUnitPrice: [
          {
            type: "number",
            required: true,
            message: "输入运费单价",
            trigger: "blur",
          },
        ],

        estimateAmt: [
          {
            type: "number",
            required: true,
            message: "输入运费总价",
            trigger: "blur",
          },
        ],
        platformUnitPrice: [
          {
            required: true,
            message: "输入运费单价",
            trigger: "blur",
          },
        ],
        damageCargo: [
          {
            type: "number",
            required: true,
            message: "输入货损费用",
            trigger: "blur",
          },
        ],
        rfreightFee: [
          {
            required: true,
            message: "输入实结运费",
            trigger: "blur",
          },
        ],
        sfreightFee: [
          {
            type: "number",
            required: true,
            message: "输入应结运费",
            trigger: "blur",
          },
        ],
        amount: [
          {
            type: "number",
            required: true,
            message: "输入结算金额",
            trigger: "blur",
          },
        ],
        transGoodWeight: [
          {
            type: "number",
            required: true,
            message: "输入装载吨数",
            trigger: "blur",
          },
        ],
        realGoodWeight: [
          {
            type: "number",
            required: true,
            message: "输入签收吨数",
            trigger: "blur",
          },
        ],
        oilcostCargo: [
          {
            type: "number",
            required: true,
            message: "输入油卡金额",
            trigger: "blur",
          },
        ],
        etcCargo: [
          {
            type: "number",
            required: true,
            message: "输入ETC费用",
            trigger: "blur",
          },
        ],
        adjustment: [
          {
            type: "number",
            required: true,
            message: "输入运费调整",
            trigger: "blur",
          },
        ],
        damageCargo: [
          {
            type: "number",
            required: true,
            message: "输入货损费用",
            trigger: "blur",
          },
        ],

        rfreightFee: [
          {
            type: "number",
            required: true,
            message: "输入实结运费",
            trigger: "blur",
          },
        ],
        amount: [
          {
            type: "number",
            required: true,
            message: "输入结算金额",
            trigger: "blur",
          },
        ],

        driverDamageCargo: [
          {
            type: "number",
            required: true,
            message: "输入货损费用",
            trigger: "blur",
          },
        ],
        driverAmount: [
          {
            type: "number",
            required: true,
            message: "输入结算金额",
            trigger: "blur",
          },
        ],

        driverRfreightFee: [
          {
            type: "number",
            required: true,
            message: "输入实结运费",
            trigger: "blur",
          },
        ],
        driverSfreightFee: [
          {
            type: "number",
            required: true,
            message: "输入应结运费",
            trigger: "blur",
          },
        ],
      },
      boxHeight: 0,
      boxScrollHeight: 0,
      boxScrollTop: 0,
      boxWindowHeitht: 0,

      mobileboxScrollTop: 0,
      mobileboxWindowHeitht: 0,
      mobileboxScrollHeight: 0,
      mobileboxHeight: 0,

      companySettlement: {},
      driverSettlement: {},
      // 警报详细
      alarmDetailsDrawer: false,
      choutiText: "报警预警明细",
      mingxititle: [
        {
          title: "时间",
          minWidth: 180,
          sortable: false,
          key: "sendTime",
        },
        {
          title: "类型",
          sortable: false,
          minWidth: 200,
          key: "earlyWarningType",
        },
        { title: "说明", sortable: false, minWidth: 390, key: "msg" },
        { title: "位置", sortable: false, minWidth: 390, key: "addr" },
      ],
      exportData: [],
      exportModalVisible: false, // 自定义导出显示
      exportTitle: "确认导出",
      filename: "报警预警明细",
      loadingExport: true, // 导出加载状态\
      chooseColumns: [],
      exportarr: [],
      exportRemarks: "",
      exportColumns: [
        {
          title: "运单编号",
          key: "orderNo",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "车牌号",
          key: "vehicleNum",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "时间",
          key: "sendTime",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "类型",
          key: "earlyWarningType",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "说明",
          key: "msg",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "位置",
          key: "addr",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "经纬度",
          key: "dangerAreaLocation",
          minWidth: 100,
          sortable: true,
        },
      ],
      mingxidata: [],
      currentTime: "", //当前时间
      Time1: "", //格式化后的时间
      Time2: "",
      Time3: "",
      Time4: "",
      carryGoodWeight: 0, //最大承重量
      documentaryRecordModal: false, //日志弹框
      documentaryRecord: "", //新增处理日志
      documentarybtn: false, //日志加载
      waybillRecordList: [], //处理日志
      trajectoryMonitor: "vehicleMapName", //轨迹监控切换
      mobileMaplist: [], //手机轨迹数据
      policPyicture: {}, //投保图片文件夹
      policyNoCode: "", //保单编号
      modallInsureScarry: false, //投保弹框
      uploadConsultingId: uploadComplaintPicId,
      insureImg: "", // 投保图片

      OwnerDetailsId: "", //货主Id
      OwnerDetailsModalue: false, //货主详情弹框

      waybillAvatar: "", //托运人头像
      carrierAvatar: "", //承运人头像
      driverHead: "", //驾驶员头像
      modifyLoading: false,
      settlementLoading: false,
      tranLoading: false,
      indexcss: null,
      cmobileindex: null,
      TouchThe: false,
      mobilTouchThe: false,
      vehiclemap: "",
      mobilemap: "",
      VehiTlerajectory: [],
      mobilePhoneTrack: [],

      mobilePhoneList: [],
      mobilePhoneData: [],
      adjustmentremarks: "", //备注
      shippertTremarks: "", //备注
      subRemarks: "", //备注
      load: 0, // 动态显示进度条
      LoadingBilltrue: false, // 关闭进度条
      UnloadingListtrue: false, // 关闭进度条
      GroupPhototrue: false, // 关闭进度条
      GroupGoodstrue: false, // 关闭进度条
      cancleOrderModel: false,
      cancleOrderDesc: "",
      addtype: 1, //判断装卸货
      changeTimes: "", //选择装卸货日期
      changeAddress: false, //弹框
      changeAddresstitle: "", //文字标题
      jingdu: "", //经度
      weidu: "", //纬度
      changeParams: {},
      yNewNumber: "",
      qNewNumber: "",
      caraddress: "",
      carspd: "",
      carmlg: "",
      Map_location: Map_location,
      beginImg: beginImg,
      endImg: endImg,
      uploadOrderPicId: uploadOrderPicId,
      current: 0,
      userId: "",
      orderId: this.$route.query.id,
      orderInfo: {
        companyInfoVo: { companyName: "" },
        driverInfoVo: { nickName: "" },
        vehicleInfoVo: { vehicleNum: "" },
        platformInfoVo: {},
      },
      tranModal: false,
      realModal: false,
      settlementModal: false, //修改结算
      showRevised: "",
      settlementUnitPrice: "",
      settlementWeight: "",
      modal1: false,
      receiptOrderPicUrl: "",
      deliveryOrderPicUrl: "",
      manCarOrderPicUrl: "",
      manGoodsOrderPicUrl: "",
      tableData: [],
      height: "400px",
      go: "",
      html: "",
      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      url: "https://www.baidu.com/",
      scrollFun: false,
      mobilescrollFun: false,
      //
      grosslModal: false, //修改毛重吨数弹框
      grosslLoading: false, //毛重按钮
      grossNumber: "", //毛重数量

      settleDetailsData: [
        {
          sfreightFee: 0,
          damageCargo: 0,
          rfreightFee: 0,
          amount: 0,
        },
      ],

      tranColumns: [
        {
          title: "装载吨数（吨）",
          key: "transGoodWeight",
          render: (h, params) => {
            params.row.transGoodWeight = this.yNewNumber;
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.transGoodWeight,
                },
                on: {
                  "on-blur": (event) => {
                    this.yNewNumber = event.target.value;
                  },
                },
              }),
            ]);
          },
        },
      ],
      realColumns: [
        {
          title: "签收吨数（吨）",
          key: "realGoodWeight",
          render: (h, params) => {
            params.row.realGoodWeight = this.qNewNumber;
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.realGoodWeight,
                },
                on: {
                  "on-blur": (event) => {
                    this.qNewNumber = event.target.value;
                  },
                },
              }),
            ]);
          },
        },
      ],

      settlement: [
        {
          title: "卸车重量",
          key: "realGoodWeight",
          render: (h, params) => {
            this.settlementWeight = params.row.realGoodWeight;
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.realGoodWeight,
                },
                on: {
                  "on-blur": (event) => {
                    this.settlementWeight = event.target.value;
                  },
                },
              }),
            ]);
          },
        },
        {
          title: "驾驶员运费单价",
          key: "driverUnitPrice",
          render: (h, params) => {
            this.settlementUnitPrice = params.row.driverUnitPrice;
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.driverUnitPrice,
                },
                on: {
                  "on-blur": (event) => {
                    this.settlementUnitPrice = event.target.value;
                  },
                },
              }),
            ]);
          },
        },
      ],
      settlementData: [{}],
      tableData2: [{}],
      tableData3: [],

      marker: null,
      polyline: null,
      num: 0,
      newnum: 20,
      mobileNum: 0,
      mobileNewnum: 20,
      DrivingTrack: [],
      InfiniteScroll: 1,
      mobileInfiniteScroll: 1,
      arriveCoor: [],
      markers: [],
      // 轨迹导出车辆
      // exportSelectDataVehicle
      exportDataVehicle: [],
      exportModalVisibleVehicle: false, // 自定义导出显示
      exportTitleVehicle: "确认导出",
      filenameVehicle: "车辆轨迹数据",
      loadingExportVehicle: true, // 导出加载状态\
      chooseColumnsVehicle: [],
      exportarrVehicle: [],
      exportRemarksVehicle: "",
      exportColumnsVehicle: [
        {
          title: "时间",
          key: "gtm",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "车速",
          key: "spd",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "行驶里程",
          key: "mlg",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "经度",
          key: "lat",
          minWidth: 100,
          sortable: true,
        },
        {
          title: "纬度",
          key: "lon",
          minWidth: 100,
          sortable: true,
        },

        {
          title: "角度",
          key: "agl",
          minWidth: 100,
          sortable: true,
        },
      ],
      ruleForm: {},
      //
      flot: false,
      ruleFormNum: 1,
      jurisdiction: "",
      xuanzhuanNumCar: 0,
      loadingopenFence: false, //开启围栏
      loadingopencloseFence: false, //关闭围栏
    };
  },
  components: {
    OwnerDetails,
    elDescripticons,
    expandRow,
  },
  mounted() {
    let val = localStorage.getItem("jurisdictionCargo");
    val = val.split(",");
    val.forEach((e) => {
      if (e == "ROLE_KEFU") {
        this.jurisdiction = false;
      } else {
        this.jurisdiction = true;
      }
    });
    //
    this.getOrderDetail();
    this.getMap();
    // 初始化导出列数据
    let array = [];
    this.exportColumns.forEach((e) => {
      // 指定列限制权限
      if (!this.getStore("roles").includes("ROLE_ADMIN") && e.key == "mobile") {
        e.title = "[无权导出] " + e.title;
        e.disabled = true;
      } else {
        e.disabled = false;
      }
      array.push(e.title);
    });
    this.chooseColumns = array;
    // 初始化导出列数据
    let arrayVehicle = [];
    this.exportColumnsVehicle.forEach((e) => {
      // 指定列限制权限
      if (!this.getStore("roles").includes("ROLE_ADMIN") && e.key == "mobile") {
        e.title = "[无权导出] " + e.title;
        e.disabled = true;
      } else {
        e.disabled = false;
      }
      arrayVehicle.push(e.title);
    });
    this.chooseColumnsVehicle = arrayVehicle;

    this.userId = JSON.parse(getStore("userInfo")).id;
  },
  methods: {
    getVehicleposition(vehicleNum) {
      this.spinShow = true;
      let obj = { vehicleId: this.orderInfo.vehicleId };
      vehicleposition(obj).then((res) => {
        this.spinShow = false;
        if (res.code == 200) {
          res.result.records[0].mark = GPS.gcj_encrypt(
            Number(res.result.records[0].callat),
            Number(res.result.records[0].callon)
          );
          this.carVehicle = this.orderInfo.vehicleNum; //车牌
          axios
            .get(
              "https://restapi.amap.com/v3/geocode/regeo?location=" +
                [
                  res.result.records[0].mark.lon,
                  res.result.records[0].mark.lat,
                ] +
                "&key=" +
                Gaudemap +
                "&batch=" +
                true +
                " "
            )
            .then((res) => {
              this.caraddress = res.regeocodes[0].formatted_address;
            });
          this.carspd = res.result.records[0].speed; //车速
          this.carTime = this.conversionTime(res.result.records[0].devicetime); //时间
          this.curMapAddress = true;
          let val = [];
          val.push(res.result.records[0].mark.lat);
          val.push(res.result.records[0].mark.lon);
          this.mapShow(val);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    conversionTime(val) {
      if (val > 100000) {
        var now = new Date(val),
          y = now.getFullYear(),
          m = now.getMonth() + 1,
          d = now.getDate(),
          x =
            y +
            "-" +
            (m < 10 ? "0" + m : m) +
            "-" +
            (d < 10 ? "0" + d : d) +
            " " +
            now.toTimeString().substr(0, 8);
        return x;
      } else {
        return 0;
      }
    },
    mapShow(val) {
      let startx = val[1];
      let starty = val[0];
      var map = new AMap.Map("themap", {
        resizeEnable: true,
        // center: val[0],
        center: [val[1], val[0]],
        zoom: 13,
      });
      var begin = new AMap.Marker({
        position: new AMap.LngLat(startx, starty), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: "https://webapi.amap.com/images/car.png",
      });
      map.add(begin);
      // this.marker.setMap(map);
    },
    // 旋转
    xuanzhuan(elename) {
      this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1;
      var box = document.getElementById(elename);
      box.style.transform = "rotateZ(" + 90 * this.xuanzhuanNumCar + "deg)";
    },
    // 待接单按钮
    waiting() {
      this.vehicleLicenseForm.userId = "";
      this.selectModal = true;
      getPcFreeJoinDriverVo({
        userId: this.orderInfo.actualCarrierUserId,
      }).then((res) => {
        if (res.code == 200) {
          this.getUnboundDriver = res.result;
        } else {
          this.$Message.error(re.message);
        }
      });
    },
    // 接单确定
    orderReceiving() {
      if (!this.vehicleLicenseForm.userId) {
        return this.$Message.warning("请先选择驾驶员和车辆");
      }
      let data = {
        driverId: this.vehicleLicenseForm.userId,
        orderId: this.$route.query.id,
      };
      this.loadingbut = true;
      pcDdistributeLeaflets(data).then((re) => {
        this.loadingbut = false;
        if (re.code == 200) {
          this.$Message.success("接单成功");
          this.selectModal = false;
          // this.getOrderDetail();
          this.$router.push({
            name: "waybillReceived",
            query: { key: this.$route.query.key, page: this.$route.query.page },
          });
        } else {
          this.$Message.error(re.message);
        }
      });
    },
    // 协助货主通过待审核
    determine() {
      let data = {
        orderId: this.$route.query.id,
        toExamine: 1,
      };
      this.$Modal.confirm({
        title: "确认结算",
        content: "确认将该运单结算通过吗？",
        loading: true,
        onOk: () => {
          this.$Modal.remove();
          saveDetails(data).then((re) => {
            if (re.code == 200) {
              this.$Message.success("结算成功");
              this.getOrderDetail();
            } else {
              this.$Message.error(re.message);
            }
          });
        },
      });
    },
    // 拒接运单
    waybillReject() {
      this.rejectModal = true;
    },
    // 拒接确定
    rejectModalClick() {
      if (!this.rejecInputs) {
        return this.$Message.warning("请填写拒绝原因");
      }
      this.loadingbut = true;
      let data = {
        orderId: this.$route.query.id,
        toExamine: 2,
        refuseDesc: this.rejecInputs,
      };
      saveDetails(data).then((re) => {
        this.loadingbut = false;
        if (re.code == 200) {
          this.$Message.success("拒接结算");
          this.getOrderDetail();
          this.rejectModal = false;
        } else {
          this.$Message.error(re.message);
        }
      });
    },
    // 点击查看回复图片
    handleView(url) {
      let image = new Image();
      image.src = url;
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
    },
    // 删除图片
    handleRemove(file) {
      this.policPyicture = {};
    },
    // 成功
    handleSuccess(res, file, fileList) {
      if (res.result != null) {
        var a = res.result;
        this.enlargeImig =
          this.$baseUrl +
          "/freight/file/view/" +
          a +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      }
    },
    // 文件格式验证失败时的钩子
    handleFormatError(file) {
      this.$Message.error("图片格式错误,指定上传图片格式 jpg、jpeg、png");
    },
    // 文件超出指定大小限制时的钩子
    handleMaxSize(file) {
      this.$Message.error("图片超出了最大存储限制");
    },
    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    // 上传文件之前的钩子，参数为上传的文件
    handleBeforeUpload(file) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const _base64 = reader.result;
        file.url = _base64;
        this.policPyicture = file;
      };
      this.fileall = file;
      return false;
    },
    // 是否投保
    policyNo() {
      this.insureImg =
        this.$baseUrl +
        "/freight/file/view/" +
        this.orderInfo.insurePhoto +
        "?accessToken=" +
        this.accessToken +
        "&preview=true";
    },
    //货主详细信息
    LookCargoOwnerInfo(row) {
      this.OwnerDetailsId = this.orderInfo.companyUserId;
      this.OwnerDetailsModalue = true;
    },
    // 货主详细信息关闭
    OwnerDetaiEnd(val) {
      this.OwnerDetailsModalue = val;
      this.OwnerDetailsId = "";
    },
    // 车辆轨迹滑动
    handleScroll() {
      this.boxScrollTop = this.$refs.personDom.scrollTop; //滑入屏幕上方的高度
      this.boxWindowHeitht = this.$refs.personDom.clientHeight; //能看到的页面的高度
      this.boxScrollHeight = this.$refs.personDom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
      this.boxHeight = this.boxScrollTop + this.boxWindowHeitht;
      if (Math.round(this.boxHeight - 30) == this.boxScrollHeight - 30) {
        if (!this.scrollFun) {
          this.scrollFun = true;
          if (this.InfiniteScroll == 2) {
            this.TouchThe = true;
            return false;
          } else {
            this.TouchThe = false;
            this.InverseGeocoding(this.num + 20, this.newnum + 20);
          }
        }
      }
    },
    // 手机轨迹滑动
    mobilehandleScroll(e) {
      this.mobileboxScrollTop = this.$refs.mobilepersonDom.scrollTop; //滑入屏幕上方的高度
      this.mobileboxWindowHeitht = this.$refs.mobilepersonDom.clientHeight; //能看到的页面的高度
      this.mobileboxScrollHeight = this.$refs.mobilepersonDom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
      this.mobileboxHeight =
        this.mobileboxScrollTop + this.mobileboxWindowHeitht;
      if (
        Math.round(this.mobileboxHeight - 30) ==
        this.mobileboxScrollHeight - 30
      ) {
        if (!this.mobilescrollFun) {
          this.mobilescrollFun = true;
          if (this.mobileInfiniteScroll == 2) {
            this.mobilTouchThe = true;
            return false;
          } else {
            this.mobilTouchThe = false;
            this.mobileGeocoding(this.mobileNum + 20, this.mobileNewnum + 20);
          }
        }
      }
    },
    // 点击了时间线
    handleChangeVideo(val, index) {
      this.indexcss = index;
      let xy = [];
      xy.push(val.resul.lon);
      xy.push(val.resul.lat);
      this.vehiclemap.remove(this.markers);
      this.markers = [];
      this.arriveCoor = [];
      this.arriveCoor.push(xy);
      for (let index = 0; index < this.arriveCoor.length; index++) {
        var marker = new AMap.Marker({
          icon: new AMap.Icon({
            image: Map_location,
            // size: new AMap.Size(20, 20), //图标大小
            imageSize: new AMap.Size(32, 32),
          }),
          position: this.arriveCoor[index],
          offset: new AMap.Pixel(-13, -30),
          // 设置是否可以拖拽
          draggable: true,
          cursor: "move",
          // 设置拖拽效果
          raiseOnDrag: true,
          // zoomToAccuracy: true,
        });
        this.markers.push(marker);
        this.vehiclemap.add(marker);
      }
    },
    //选择时间
    timeschange(val) {
      this.changeTimes = val;
    },
    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    getMap() {
      let that = this;
      var map = new AMap.Map("containerAddress", {
        zoom: 6,
      });

      AMapUI.loadUI(
        ["misc/PoiPicker", "misc/PositionPicker"],
        function (PoiPicker, PositionPicker) {
          var poiPicker = new PoiPicker({
            //city:'北京',
            input: "pickerInputthree",
          });
          var positionPicker = new PositionPicker({
            mode: "dragMap",
            map: map,
          });
          positionPicker.on("success", function (positionResult) {
            document.getElementById("lnglatAddress").innerHTML =
              positionResult.position;
            document.getElementById("addressadd").innerHTML =
              positionResult.address;
            that.weidu = positionResult.position.lat;
            that.jingdu = positionResult.position.lng;
          });
          positionPicker.on("fail", function (positionResult) {});
          var onModeChange = function (e) {
            positionPicker.setMode(e.target.value);
          };
          var startButton = document.getElementById("start");
          var stopButton = document.getElementById("stop");
          var dragMapMode = document.getElementsByName("mode")[0];
          var dragMarkerMode = document.getElementsByName("mode")[1];
          startButton.addEventListener("click", function () {
            positionPicker.start(map.getBounds().getSouthWest());
          });
          stopButton.addEventListener("click", function () {
            positionPicker.stop();
          });
          dragMapMode.addEventListener("change", onModeChange);
          dragMarkerMode.addEventListener("change", onModeChange);
          positionPicker.start();
          map.panBy(0, 1);
          map.addControl(
            new AMap.ToolBar({
              liteStyle: true,
            })
          );
          //初始化poiPicker
          poiPickerReady(poiPicker);
        }
      );
      function poiPickerReady(poiPicker) {
        window.poiPicker = poiPicker;
        var marker = new AMap.Marker();
        var infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -20),
        });
        //选取了某个POI
        poiPicker.on("poiPicked", function (poiResult) {
          var source = poiResult.source,
            poi = poiResult.item,
            info = {
              source: source,
              id: poi.id,
              name: poi.name,
              location: poi.location.toString(),
              address: poi.address,
            };
          marker.setMap(map);
          infoWindow.setMap(map);
          marker.setPosition(poi.location);
          infoWindow.setPosition(poi.location);
          document.getElementById("lnglatAddress").innerHTML = info.location;
          document.getElementById("addressadd").innerHTML = info.name;
          document.getElementById("pickerInputthree").value = info.name;
          that.weidu = poi.location.lat;
          that.jingdu = poi.location.lng;
          map.setCenter(marker.getPosition());
        });
        poiPicker.onCityReady(function () {
          // poiPicker.suggest('美食');
        });
      }
      this.caraddress = "暂无车辆轨迹";
    },
    goBack() {
      if (this.$route.query.pageType == 1) {
        //应结明细
        this.$router.push({
          name: "statement",
          query: {
            key: this.$route.query.key,
            activeName: this.$route.query.activeName,
          },
        });
      } else if (this.$route.query.pageType == 4) {
        //承运运单
        this.$router.push({
          name: "order-carryWaybill",
          query: { key: this.$route.query.key },
        });
      } else if (this.$route.query.pageType == 5) {
        //结算审核
        this.$router.push({
          name: "SettlementReview",
          query: { key: this.$route.query.key },
        });
      } else if (this.$route.query.pageType == 9) {
        //开票明细的行程
        this.$router.push({
          name: "invoiceDetails",
          query: {
            key: this.$route.query.key,
            search: this.$route.query.search,
            id: this.$route.query.key,
            pageTypes: this.$route.query.pageTypes,
            pageType_orde: this.$route.query.pageType,
          },
        });
      } else if (this.$route.query.pageType == 10) {
        //-账单明细-操作明细
        this.$router.push({
          name: "paydetails",
          query: {
            key: this.$route.query.key,
            search: this.$route.query.search,
            id: this.$route.query.key,
            pageTypes: this.$route.query.pageType,
            goPayDetailsType: this.$route.query.goPayDetailsType,
            billMnagement: this.$route.query.billMnagement,
            billStatus: this.$route.query.billStatus,
          },
        });
      } else if (this.$route.query.pageType == 11) {
        //投诉
        this.$router.push({
          name: "messageComplaint",
          query: {
            consulaint: this.$route.query.consulaint,
            key: this.$route.query.key,
          },
        });
      } else if (this.$route.query.pageType == 12) {
        //投诉详情
        this.$router.push({
          name: "ConsultDetails",
          query: {
            consulaint: this.$route.query.consulaint,
            key: this.$route.query.key,
            data: this.$route.query.data,
            activities: this.$route.query.activities,
            seetest: this.$route.query.seetest,
          },
        });
      } else if (this.$route.query.pageType == 13) {
        //申请开票
        this.$router.push({
          name: "applyForInvoicing",
          query: {
            consulaint: this.$route.query.consulaint,
            key: this.$route.query.key,
            data: this.$route.query.data,
            activities: this.$route.query.activities,
            seetest: this.$route.query.seetest,
          },
        });
      } else if (this.$route.query.pageType == 14) {
        //运单监控
        this.$router.push({
          name: "waybillMonitoring",
          query: { key: this.$route.query.key, page: this.$route.query.page },
        });
      } else if (this.$route.query.pageType == 15) {
        //单据审核
        this.$router.push({
          name: "auditWaybill",
          query: { key: this.$route.query.key, page: this.$route.query.page },
        });
      } else if (this.$route.query.pageType == 16) {
        //待接运单
        this.$router.push({
          name: "waybillReceived",
          query: { key: this.$route.query.key, page: this.$route.query.page },
        });
      } else if (this.$route.query.pageType == 19) {
        //代开明细
        this.$router.push({
          name: "isDetails",
          query: {
            key: this.$route.query.key,
            search: this.$route.query.search,
            id: this.$route.query.key,
            pageTypes: this.$route.query.pageTypes,
            pageType_orde: this.$route.query.pageType,
          },
        });
      } else if (this.$route.query.pageType == 20) {
        // 明细里的明细的弹框
        this.$router.push({
          name: "paydetails",
          query: {
            key: this.$route.query.key,
            search: this.$route.query.search,
            id: this.$route.query.key,
            pageTypes: this.$route.query.pageType,
            goPayDetailsType: this.$route.query.goPayDetailsType,
            billMnagement: this.$route.query.billMnagement,
            billStatus: this.$route.query.billStatus,
            addDillModal: this.$route.query.addDillModal,
          },
        });
      } else if (this.$route.query.pageType == 21) {
        //汇总代开
        this.$router.push({
          name: "summarizedIissued",
          query: {
            consulaint: this.$route.query.consulaint,
            key: this.$route.query.key,
            data: this.$route.query.data,
            activities: this.$route.query.activities,
            seetest: this.$route.query.seetest,
          },
        });
      } else if (this.$route.query.pageType == 22) {
        //汇总代开
        this.$router.push({
          name: "paymentBill",
          query: {
            key: this.$route.query.key,
          },
        });
      }
    },

    //装货磅单
    LoadingBill(event, file, fileList) {
      this.progressAll(event, 1);
    },
    //装货磅单
    UnloadingList(event, file, fileList) {
      this.progressAll(event, 2);
    },
    // 人车合照
    GroupPhoto(event, file, fileList) {
      this.progressAll(event, 3);
    },
    // 人货合照
    GroupGoods(event, file, fileList) {
      this.progressAll(event, 4);
    },
    //进度条
    progressAll(data, num) {
      if (num == 1) {
        this.LoadingBilltrue = true; // 显示进度条
      } else if (num == 2) {
        this.UnloadingListtrue = true; // 显示进度条
      } else if (num == 3) {
        this.GroupPhototrue = true;
      } else if (num == 4) {
        this.GroupGoodstrue = true;
      }
      var CardBack = setTimeout(() => {
        this.load = parseInt(data.percent); // 动态获取文件上传进度
      }, 500); // 一秒后关闭进度条
      setTimeout(() => {
        if (this.load >= 100) {
          this.load = 100;
          setTimeout(() => {
            if (num == 1) {
              this.LoadingBilltrue = false; // 显示进度条
            } else if (num == 2) {
              this.UnloadingListtrue = false; // 显示进度条
            } else if (num == 3) {
              this.GroupPhototrue = false;
            } else if (num == 4) {
              this.GroupGoodstrue = false;
            }
          }, 1000); // 一秒后关闭进度条
          clearTimeout(CardBack);
        }
      }, 501);
    },
    //装货合照
    deliveryHandleSuccess(res, file, fileList) {
      if (res.code == 500) {
        this.$Message.error(res.message);
        return;
      } else if (res.code == 200) {
        this.$Message.success("上传成功");
        this.getOrderDetail();
      }
      if (res.result != null) {
        this.orderInfo.deliveryOrderPicId = res.result;
        this.deliveryOrderPicUrl =
          this.$baseUrl + this.orderInfo.deliveryOrderPicId;
      }
    },

    //卸货合照
    receiptHandleSuccess(res, file, fileList) {
      if (res.code == 500) {
        this.$Message.error(res.message);
        return;
      } else if (res.code == 200) {
        this.$Message.success("上传成功");
        this.getOrderDetail();
      }
      if (res.result != null) {
        this.orderInfo.receiptOrderPicId = res.result;
        this.receiptOrderPicUrl =
          this.$baseUrl +
          "/freight/file/view/" +
          this.orderInfo.receiptOrderPicId +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      }
    },
    cancle() {
      this.cancleOrderModel = true;
    },
    // 取消原因
    cancleOrderClick() {
      if (this.cancleOrderDesc == "" || this.cancleOrderDesc == undefined) {
        this.$Message.info("请输入取消原因");
        return;
      }
      this.cancleLoading = true;
      const params = {
        userId: JSON.parse(getStore("userInfo")).id,
        state: -1,
        desc: this.cancleOrderDesc,
        orderId: this.orderInfo.id,
      };
      this.cancleOrderModel = false;
      changeOrderState(params).then((res) => {
        this.cancleLoading = false;
        if (res.code == 200) {
          this.$Message.success("订单取消成功");
          // this.getOrderDetail();
          this.$router.push({
            name: "order-carryWaybill",
            query: { key: this.$route.query.key, page: this.$route.query.page },
          });
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 开启围栏
    openFence() {
      this.spinShow = true;
      this.loadingopenFence = true;
      updateAddressFence({
        orderId: this.orderInfo.id,
        addressFence: "1",
      }).then((res) => {
        this.spinShow = false;
        this.loadingopenFence = false;
        if (res.code == 200) {
          this.getOrderDetail();
          this.$Message.success("运单开启电子围栏");
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 关闭围栏
    closeFence() {
      this.spinShow = true;
      this.loadingopencloseFence = true;
      updateAddressFence({
        orderId: this.orderInfo.id,
        addressFence: "0",
      }).then((res) => {
        this.spinShow = false;
        this.loadingopencloseFence = false;
        if (res.code == 200) {
          this.getOrderDetail();
          this.$Message.success("运单关闭电子围栏");
        } else {
          // this.loadingopencloseFence = false;
          this.$Message.error(res.message);
        }
      });
    },
    // 处理日志列表
    // 日志
    waybillDocumentary() {
      this.documentaryRecordModal = true;
      this.documentaryList(this.orderInfo.id);
    },
    // 处理日志列表
    documentaryList(entrustedId) {
      getDocumentaryListOrder({
        orderId: entrustedId,
      }).then((res) => {
        if (res.code == 200) {
          this.waybillRecordList = res.result;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 处理日志
    documentaryPreservation() {
      if (this.documentaryRecord == "") {
        return this.$Message.warning("请输入处理日志");
      }
      this.documentarybtn = true;
      let datas = {
        operationId: this.orderInfo.id,
        content: this.documentaryRecord,
      };
      orderaddDocumentary(datas).then((res) => {
        this.documentarybtn = false;
        if (res.code == 200) {
          this.$Message.success("添加处理日志成功");
          this.documentaryRecord = "";
          this.documentaryList(this.orderInfo.id);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 选择时间和地址
    changedetail() {
      if (this.addtype < 2) {
        if (this.changeTimes == "") {
          return this.$Message.error("请选择装货时间");
        }
        if (this.jingdu == "") {
          return this.$Message.error("请选择装货地址");
        }

        this.detaiLoading = true;
        saveOrderExtend({
          orderId: this.changeParams.orderId,
          vehicleNum: this.orderInfo.driverInfoVo.driverCode,
          lng: this.jingdu,
          lat: this.weidu,
          times: this.changeTimes,
          userId: this.changeParams.userId,
        }).then((res) => {
          this.detaiLoading = false;
          if (res.code == 200) {
            this.$Message.success("已成功装货");
            this.changeAddress = false;
            this.getOrderDetail();
          } else {
            this.$Message.error(res.message);
          }
        });
      } else {
        if (this.changeTimes == "") {
          return this.$Message.error("请选择卸货时间");
        }
        if (this.jingdu == "") {
          return this.$Message.error("请选择卸货地址");
        }

        updateOrderExtend({
          orderId: this.changeParams.orderId,
          vehicleNum: this.orderInfo.driverInfoVo.driverCode,
          lng: this.jingdu,
          lat: this.weidu,
          times: this.changeTimes,
          userId: this.changeParams.userId,
        }).then((res) => {
          if (res.code == 200) {
            this.$Message.success("已成功卸货");
            this.changeAddress = false;
            this.getOrderDetail();
          } else {
            this.$Message.error(res.message);
          }
        });
      }
    },
    // 退回修改
    returnModification() {
      this.$Modal.confirm({
        title: "退回修改",
        content: "确认该运单通过退回修改确认？",
        loading: true,
        onOk: () => {
          let orderId = this.$route.query.id;
          let data = {
            orderId: orderId,
            state: 3,
          };
          changeOrderState(data).then((res) => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("退回修改通过");
              this.getOrderDetail();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    // 很多状态的按钮
    onNext() {
      // this.spinShow = true;
      const params = {
        userId: JSON.parse(getStore("userInfo")).id,
        state: this.orderInfo.orderState + 1,
        orderId: this.orderInfo.id,
      };
      this.changeParams = params;
      if (this.orderInfo.orderState == 5) {
        return;
      }
      if (this.orderInfo.orderState == 1) {
        this.changeAddress = true;
        this.changeAddresstitle = "请选择装货地址";
        return;
      }
      if (this.orderInfo.orderState == 2) {
        this.addtype = 2;
        this.changeAddress = true;
        this.changeAddresstitle = "请选择卸货地址";
        return;
      }
      if (this.orderInfo.orderState == 3) {
        this.$Modal.confirm({
          title: "财务审核",
          content: "确认该运单通过财务审核确认？",
          loading: true,
          onOk: () => {
            let orderId = this.$route.query.id;
            let data = {
              orderId: orderId,
              state: 4,
            };
            changeOrderState(data).then((res) => {
              this.spinShow = false;
              this.$Modal.remove();
              if (res.code == 200) {
                this.$Message.success("财务审核通过");
                this.getOrderDetail();
              } else {
                this.$Message.error(res.message);
              }
            });
          },
        });
        return;
      }
      // 4已签收'
      if (this.orderInfo.orderState == 4) {
        this.$Modal.confirm({
          title: "确认支付",
          content: "确认该运单通过确认支付确认？",
          loading: true,
          onOk: () => {
            let orderId = this.$route.query.id;
            let data = {
              orderId: orderId,
              state: 5,
            };
            changeOrderState(data).then((res) => {
              this.spinShow = false;
              this.$Modal.remove();
              if (res.code == 200) {
                this.$Message.success("确认支付通过");
                this.getOrderDetail();
              } else {
                this.$Message.error(res.message);
              }
            });
          },
        });
        return;
      }
      if (this.orderInfo.orderState == 0) {
        changeOrderState(params).then((res) => {
          this.spinShow = false;
          if (res.code == 200) {
            this.$Message.success("接单成功");
            this.getOrderDetail();
          } else {
            this.$Message.error(res.message);
          }
        });
        return;
      }
    },

    // 预览结算
    previewSettlement() {
      this.companyList = [];
      this.driverList = [];
      previewSettlementSheet({ orderId: this.$route.query.id }).then((res) => {
        this.companySettlement = res.result.companyDetails;
        this.driverSettlement = res.result.driverDetails;

        this.methodGetOrderAdjustmentList(1);

        this.companyList.push(res.result.companyDetails);
        this.driverList.push(res.result.driverDetails);

        this.companyList.forEach((e) => {
          if (this.orderInfo.pricingType == "1") {
            e.platformUnitPrice = this.orderInfo.platformUnitPrice;
          } else {
            e.platformTotalPrice = this.orderInfo.platformTotalPrice;
          }
          e.name = "托运人";
        });

        this.driverList.forEach((e) => {
          if (this.orderInfo.pricingType == "1") {
            e.driverUnitPrice = this.orderInfo.driverUnitPrice;
          } else {
            e.driverTotalPrice = this.orderInfo.driverTotalPrice;
          }
          e.name = "实际承运人";
        });

        this.$nextTick(() => {
          //在数据加载完，重新渲染表格
          this.$refs["table"].doLayout();
          this.$refs["tables"].doLayout();
        });
        this.formRevised.damageCargo = this.companySettlement.damageCargo;
        this.formRevised.rfreightFee = this.companySettlement.rfreightFee;
        this.formRevised.sfreightFee = this.companySettlement.sfreightFee;
        this.formRevised.amount = this.companySettlement.amount;

        // 托运人 备注
        if (this.companySettlement.adjustmentremarks) {
          this.shippertTremarks = this.companySettlement.adjustmentremarks;
        } else {
          this.shippertTremarks = "";
        }
        // 托运人 运费调整
        if (this.companySettlement.addReduce) {
          this.shipperDisabledGroup = this.companySettlement.addReduce;
        } else {
          this.shipperDisabledGroup = "2";
        }
        if (this.companySettlement.adjustment) {
          this.formRevised.cargoOwnerAdjustment =
            this.companySettlement.adjustment;
        } else {
          this.formRevised.adjustcargoOwnerAdjustmentment = 0;
        }

        this.formRevised.platformUnitPrice = this.orderInfo.platformUnitPrice;
        this.formRevised.driverUnitPrice = this.orderInfo.driverUnitPrice;
        this.formRevised.driverDamageCargo = this.driverSettlement.damageCargo;
        this.formRevised.driverRfreightFee = this.driverSettlement.rfreightFee;
        this.formRevised.driverSfreightFee = this.driverSettlement.sfreightFee;
        this.formRevised.driverAmount = this.driverSettlement.amount;

        this.formRevised.etcCargo = this.driverSettlement.etcCargo;
        this.formRevised.oilcostCargo = this.driverSettlement.oilcostCargo;

        if (this.driverSettlement.adjustment) {
          this.formRevised.adjustment = this.driverSettlement.adjustment;
        } else {
          this.formRevised.adjustment = 0;
        }

        if (this.driverSettlement.addReduce) {
          this.disabledGroup = this.driverSettlement.addReduce;
        } else {
          this.disabledGroup = "2";
        }
        // 实际承运人
        if (this.driverSettlement.adjustmentremarks) {
          this.adjustmentremarks = this.driverSettlement.adjustmentremarks;
        } else {
          this.adjustmentremarks = "";
        }
      });
    },
    tiaozhjeng() {
      this.formRevised.damageCargo = this.companySettlement.damageCargo;
      this.formRevised.rfreightFee = this.companySettlement.rfreightFee;
      this.formRevised.sfreightFee = this.companySettlement.sfreightFee;
      this.formRevised.amount = this.companySettlement.amount;

      // 托运人 备注
      if (this.companySettlement.adjustmentremarks) {
        this.shippertTremarks = this.companySettlement.adjustmentremarks;
      } else {
        this.shippertTremarks = "";
      }
      // 托运人 运费调整
      if (this.companySettlement.addReduce) {
        this.shipperDisabledGroup = this.companySettlement.addReduce;
      } else {
        this.shipperDisabledGroup = "2";
      }
      if (this.companySettlement.adjustment) {
        this.formRevised.cargoOwnerAdjustment =
          this.companySettlement.adjustment;
      } else {
        this.formRevised.adjustcargoOwnerAdjustmentment = 0;
      }

      this.formRevised.platformUnitPrice = this.orderInfo.platformUnitPrice;
      this.formRevised.driverUnitPrice = this.orderInfo.driverUnitPrice;
      this.formRevised.driverDamageCargo = this.driverSettlement.damageCargo;
      this.formRevised.driverRfreightFee = this.driverSettlement.rfreightFee;
      this.formRevised.driverSfreightFee = this.driverSettlement.sfreightFee;
      this.formRevised.driverAmount = this.driverSettlement.amount;

      this.formRevised.etcCargo = this.driverSettlement.etcCargo;
      this.formRevised.oilcostCargo = this.driverSettlement.oilcostCargo;

      if (this.driverSettlement.adjustment) {
        this.formRevised.adjustment = this.driverSettlement.adjustment;
      } else {
        this.formRevised.adjustment = 0;
      }

      if (this.driverSettlement.addReduce) {
        this.disabledGroup = this.driverSettlement.addReduce;
      } else {
        this.disabledGroup = "2";
      }
      // 实际承运人
      if (this.driverSettlement.adjustmentremarks) {
        this.adjustmentremarks = this.driverSettlement.adjustmentremarks;
      } else {
        this.adjustmentremarks = "";
      }
    },

    getAge(value) {
      let birthdays = new Date(value);
      let age = birthdays.valueOf();
      return age;
    },
    getOrderDetail() {
      this.mobilePhoneTrack = [];
      getOrderVoInfo({ orderId: this.$route.query.id }).then((res) => {
        if (res.code == 200) {
          let a = null;
          if (res.result.companyInfoVo == a) {
            res.result.companyInfoVo = {
              mobile: "",
              companyName: "",
            };
          }
          this.orderInfo = res.result;
          let valContactName = "";
          let valMobile = "";
          if (this.orderInfo.companyInfoVo.mobile) {
            valMobile = this.orderInfo.companyInfoVo.mobile;
            let text1 = valMobile.substring(0, 3);
            let text2 = valMobile.substring(8);
            valMobile = `${text1}*****${text2}`;
            this.orderInfo.companyInfoVo.mobile = valMobile;
          }

          this.formRevised.platformUnitPrice = this.orderInfo.platformUnitPrice;
          this.formRevised.platformTotalPrice =
            this.orderInfo.platformTotalPrice;

          this.formRevised.driverUnitPrice = this.orderInfo.driverUnitPrice;
          this.formRevised.driverTotalPrice = this.orderInfo.driverTotalPrice;

          this.formRevised.transGoodWeight = this.orderInfo.transGoodWeight;
          this.formRevised.realGoodWeight = this.orderInfo.realGoodWeight;

          this.currentTime = this.getAge(new Date());
          this.Time1 = this.getAge(this.orderInfo.estimateLoadingTime);
          this.Time2 = this.getAge(this.orderInfo.startDate);
          this.Time3 = this.getAge(this.orderInfo.estimateDischargeTime);
          this.Time4 = this.getAge(this.orderInfo.endDate);
          if (this.orderInfo.vehicleInfoVo) {
            this.carryGoodWeight = this.orderInfo.vehicleInfoVo.approvedLoad; // / 1000
          }
          if (this.orderInfo.companyInfoVo.avatar) {
            if (this.orderInfo.companyInfoVo.avatar.indexOf(":") !== -1) {
              this.waybillAvatar = this.defaultAvatar;
            } else {
              this.waybillAvatar =
                this.$baseUrl + this.orderInfo.companyInfoVo.avatar;
            }
          } else {
            this.waybillAvatar = this.defaultAvatar;
          }

          if (this.orderInfo.content != null) {
            if (this.orderInfo.content.length >= 15) {
              let text1 = this.orderInfo.content.substring(0, 10);
              this.subRemarks = `${text1}....`;
            } else {
              this.subRemarks = this.orderInfo.content;
            }
          }
          if (this.orderInfo.vehicleInfoVo == null) {
            this.orderInfo.vehicleInfoVo = { vehicleNum: "" };
          }
          if (this.orderInfo.deliveryOrderPicId != null) {
            this.deliveryOrderPicUrl =
              this.$baseUrl + this.orderInfo.deliveryOrderPicId;
          }
          if (this.orderInfo.receiptOrderPicId != null) {
            this.receiptOrderPicUrl =
              this.$baseUrl + this.orderInfo.receiptOrderPicId;
          }
          if (this.orderInfo.manCarOrderPicId != null) {
            this.manCarOrderPicUrl =
              this.$baseUrl + this.orderInfo.manCarOrderPicId;
          }
          if (this.orderInfo.manGoodsOrderPicId != null) {
            this.manGoodsOrderPicUrl =
              this.$baseUrl + this.orderInfo.manGoodsOrderPicId;
          }
          if (
            this.orderInfo.transGoodWeight == null ||
            this.orderInfo.transGoodWeight == "0"
          ) {
            this.orderInfo.transGoodWeight = " - - ";
          }

          if (
            this.orderInfo.realGoodWeight == null ||
            this.orderInfo.realGoodWeight == "0"
          ) {
            this.orderInfo.realGoodWeight = " - - ";
          }

          this.tableData = [];

          const params = {
            name: "运费",
            freightUnitPrice: res.result.freightUnitPrice,
            realGoodWeight: res.result.realGoodWeight,
            transGoodWeight: res.result.transGoodWeight,
          };

          this.tableData.push(params);
          if (res.result.orderState >= 3) {
            // this.previewSettlement();
          } else {
            this.companySettlement = {};
            this.driverSettlement = {};
          }
          // if ([4].includes(res.result.orderState)) {

          //   this.current = 3;
          // }

          if ([5, 6, 7].includes(res.result.orderState)) {
            this.current = 5;
          } else {
            this.current = res.result.orderState;
          }
          //
          if (
            this.orderInfo.informationTips != "" &&
            this.orderInfo.informationTips != null
          ) {
            if (
              this.orderInfo.informationTips.charAt(
                this.orderInfo.informationTips.length - 1
              ) == ","
            ) {
              this.orderInfo.informationTips =
                this.orderInfo.informationTips.substring(
                  0,
                  this.orderInfo.informationTips.lastIndexOf(",")
                );
            }
            this.orderInfo.informationTipsVehicle =
              this.orderInfo.informationTips.split(",");
          } else {
            this.orderInfo.informationTipsVehicle =
              this.orderInfo.informationTips;
          }
        }
        this.waybillData = res.result;

        let array = [];
        this.refreshModal();
        this.vehicleMapShow(array, 1);
        this.mobileMapShow(array, 1);
      });
    },

    exportCustomDataVehicle() {
      // 上传记录
      let param = new FormData(); // 创建form对象
      // param.append("file", a); // 通过append向form对象添加数据
      param.append("fileName", this.filenameVehicle); // 添加form表单中其他数据
      param.append("fileType", 4); // 通过append向form对象添加数据
      param.append("remarks", this.exportRemarks); // 添加form表单中其他数据
      addDownloadRecord(param).then((res) => {
        if (res.code == 200) {
          // 判断勾选导出列
          let array = [];
          this.exportColumnsVehicle.forEach((e) => {
            this.chooseColumnsVehicle.forEach((c) => {
              if (e.title == c && !e.disabled) {
                array.push(e);
              }
            });
          });
          let filenameVehicle = res.result + " " + this.filenameVehicle;
          this.exportColumnsVehicle = array;
          this.exportModalVisibleVehicle = false;
          let title = [];
          let key = [];
          this.exportColumnsVehicle.forEach((e) => {
            title.push(e.title);
            key.push(e.key);
          });
          const params = {
            title: title,
            key: key,
            data: this.exportDataVehicle,
            autoWidth: true,
            filename: filenameVehicle,
          };
          excel.export_array_to_excel(params);
        }
      });
    },
    handleReachBottom() {
      if (this.InfiniteScroll == 2) {
        this.TouchThe = true;
        return false;
      } else {
        return new Promise((resolve) => {
          setTimeout(() => {
            this.TouchThe = false;
            this.InverseGeocoding(this.num + 20, this.newnum + 20);
            resolve();
          }, 1000);
        });
      }
    },
    getPosition(k) {
      AMap.plugin("AMap.Geocoder", () => {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: "010",
        });
        geocoder.getAddress(k, (status, result) => {
          if (status === "complete" && result.info === "OK") {
            // result为对应的地理位置详细信息
            this.caraddress = result.regeocode.formattedAddress;
            // if (
            //   result.regeocode.formattedAddress == "" ||
            //   result.regeocode.formattedAddress == null
            // ) {
            //   this.caraddress = "暂无车辆轨迹";
            // } else {

            // }
          }
        });
      });
    },

    //时间格式化
    getTime(value) {
      let birthdays = new Date(value);
      let age = birthdays.valueOf();
      return age;
    },
    // 轨迹监控切换
    trackMonitoring() {
      this.refreshModal();
    },
    // 车辆轨迹
    vehicleMapShow(val, num) {
      if (num == 1) {
        let array = [];
        // array.push([this.orderInfo.beginLng, this.orderInfo.beginLat]);
        array.push([
          this.orderInfo.actualBeginLng
            ? this.orderInfo.actualBeginLng
            : this.orderInfo.beginLng,
          this.orderInfo.actualBeginLat
            ? this.orderInfo.actualBeginLat
            : this.orderInfo.beginLat,
        ]);
        this.vehiclemap = new AMap.Map("vehicleMap", {
          resizeEnable: true,
          center: array[0],
          zoom: 6,
        });
        let _this = this;
        AMap.plugin(["AMap.ToolBar"], function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          _this.vehiclemap.addControl(
            new AMap.ToolBar({
              // 简易缩放模式，默认为 false
              liteStyle: true,
            })
          );
        });
        //起点
        var beginAddressMap = new AMap.Marker({
          // this.orderInfo.beginLng,
          //   this.orderInfo.beginLat
          position: new AMap.LngLat(
            this.orderInfo.actualBeginLng
              ? this.orderInfo.actualBeginLng
              : this.orderInfo.beginLng,
            this.orderInfo.actualBeginLat
              ? this.orderInfo.actualBeginLat
              : this.orderInfo.beginLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: beginImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.vehiclemap.add(beginAddressMap);
        // this.orderInfo.endLng,
        //             this.orderInfo.endLat
        //终点
        var endAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualEndLng
              ? this.orderInfo.actualEndLng
              : this.orderInfo.endLng,
            this.orderInfo.actualEndLat
              ? this.orderInfo.actualEndLat
              : this.orderInfo.endLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: endImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.vehiclemap.add(endAddressMap);
      } else {
        this.vehiclemap = new AMap.Map("vehicleMap", {
          resizeEnable: true,
          center: val[0],
          zoom: 5,
        });
        let _this = this;
        AMap.plugin(["AMap.ToolBar"], function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          _this.vehiclemap.addControl(
            new AMap.ToolBar({
              // 简易缩放模式，默认为 false
              liteStyle: true,
            })
          );
        });
        this.num = 0;
        this.newnum = 20;
        this.InverseGeocoding(this.num, this.newnum);
        AMapUI.load(
          ["ui/misc/PathSimplifier", "lib/$"],
          function (PathSimplifier, $) {
            if (!PathSimplifier.supportCanvas) {
              alert("当前环境不支持 Canvas！");
              return;
            }
            var defaultRenderOptions = {
              renderAllPointsIfNumberBelow: -1, //绘制路线节点，如不需要可设置为-1
              pathLineStyle: {
                //路线样式设置
                lineWidth: 2,
                strokeStyle: "#3CB371",
                borderWidth: 1,
                borderStyle: "#eeeeee",
                dirArrowStyle: false,
              },
              startPointStyle: {
                //起点
                radius: 8,
                fillStyle: "#3CB371",
                lineWidth: 2,
                strokeStyle: "#eeeeee",
              },
              endPointStyle: {
                //终点
                radius: 8,
                fillStyle: "#3CB371",
                lineWidth: 2,
                strokeStyle: "#eeeeee",
              },
            };
            var pathSimplifierIns = new PathSimplifier({
              zIndex: 100,
              //autoSetFitView:false,
              map: _this.vehiclemap, //所属的地图实例
              getPath: function (pathData, pathIndex) {
                return pathData.path;
              },
              getHoverTitle: function (pathData, pathIndex, pointIndex) {
                if (pointIndex >= 0) {
                  //point
                  return (
                    pathData.name +
                    "，点：" +
                    pointIndex +
                    "/" +
                    pathData.path.length
                  );
                }
                return pathData.name + "，点数量" + pathData.path.length;
              },
              renderOptions: defaultRenderOptions,
            });
            window.pathSimplifierIns = pathSimplifierIns;
            //设置数据
            pathSimplifierIns.setData([
              {
                name: "路线0", //设置路线的初始地
                path: val,
              },
            ]);
            var navg1 = pathSimplifierIns.createPathNavigator(0, {
              loop: false,
              speed: 100000,
              pathNavigatorStyle: {
                //经过路径的样式
                pathLinePassedStyle: {
                  lineWidth: 6,
                  strokeStyle: "#087ec4",
                  dirArrowStyle: {
                    stepSpace: 15,
                    strokeStyle: "#FFFFFF",
                  },
                },
              },
            });
            navg1.start();
          }
        );
        // onRegeocodeSearched
        //当前位置
        let k = val.length - 1;
        let lnglat = val[k];
        this.getPosition(lnglat);
        //起点
        var beginAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualBeginLng
              ? this.orderInfo.actualBeginLng
              : this.orderInfo.beginLng,
            this.orderInfo.actualBeginLat
              ? this.orderInfo.actualBeginLat
              : this.orderInfo.beginLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: beginImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.vehiclemap.add(beginAddressMap);

        //终点
        var endAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualEndLng
              ? this.orderInfo.actualEndLng
              : this.orderInfo.endLng,
            this.orderInfo.actualEndLat
              ? this.orderInfo.actualEndLat
              : this.orderInfo.endLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: endImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.vehiclemap.add(endAddressMap);
      }
    },
    // 车辆轨迹
    InverseGeocoding(num, newnum) {
      this.flot = true;
      var result = [];
      var obj = {};
      var resultArr = [];
      let mm = 60000;
      for (var i = 0; i < this.DrivingTrack.length; i++) {
        if (!obj[this.DrivingTrack[i].mlg]) {
          result.push(this.DrivingTrack[i]);
          obj[this.DrivingTrack[i].mlg] = true;
        }
      }
      resultArr = result.reverse();
      resultArr.forEach((item, index) => {
        item.mark = GPS.gcj_encrypt(Number(item.lat), Number(item.lon));
      });
      resultArr.forEach((item, index) => {
        if (item.lon && item.lat) {
          item.xy = item.mark.lon + "," + item.mark.lat + "|";
          item.Timess = this.getTime(item.gtm);
          if (item.mlg < 0) {
            item.mlg = Number(resultArr[index + 1].mlg + 1);
          }
          let time1 = new Date(item.gtm).valueOf() / 1000;
          if (index === resultArr.length - 1) return;
          let time2 = new Date(resultArr[index + 1].gtm).valueOf() / 1000;
          let nums = 60 * 1;

          if (time1 - time2 > nums) {
            let minute = time1 - time2;
            minute = minute / 60;
            let numarrr = minute.toFixed(1);
            item.parkingText = "停车: " + numarrr + " 分钟";
          } else {
            item.parkingText = "";
          }
        }
      });

      let arr = [];
      for (let index = num; index < resultArr.length; index++) {
        if (index == newnum) {
          break;
        } else {
          arr[index] = resultArr[index].xy;
        }
      }
      if (num > resultArr.length) {
        this.InfiniteScroll = 2;
        this.TouchThe = true;
        return false;
      } else {
      }

      arr = arr.join("");
      arr = arr.slice(0, arr.length - 1);
      axios
        .get(
          "https://restapi.amap.com/v3/geocode/regeo?location=" +
            arr +
            "&key=" +
            Gaudemap +
            "&batch=" +
            true +
            " "
        )
        .then((res) => {
          res.regeocodes.forEach((item) => {
            this.VehiTlerajectory.push(item);
            this.scrollFun = false;
            this.num = num;
            this.newnum = newnum;
          });
          for (let index = 0; index < this.VehiTlerajectory.length; index++) {
            this.VehiTlerajectory[index].resul = resultArr[index];
          }
        })
        .catch((e) => {});
    },
    // 手机轨迹
    mobileMapShow(val, num) {
      if (num == 1) {
        // let row = JSON.parse(this.$route.query.row)
        let valuearr = [];
        valuearr.push([
          this.orderInfo.actualBeginLng
            ? this.orderInfo.actualBeginLng
            : this.orderInfo.beginLng,
          this.orderInfo.actualBeginLat
            ? this.orderInfo.actualBeginLat
            : this.orderInfo.beginLat,
        ]);
        this.mobilemap = new AMap.Map("mobileMap", {
          resizeEnable: true,
          center: valuearr[0],
          zoom: 6,
        });
        let _this = this;
        AMap.plugin(["AMap.ToolBar"], function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          _this.mobilemap.addControl(
            new AMap.ToolBar({
              // 简易缩放模式，默认为 false
              liteStyle: true,
            })
          );
        });
        //起点
        var beginAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualBeginLng
              ? this.orderInfo.actualBeginLng
              : this.orderInfo.beginLng,
            this.orderInfo.actualBeginLat
              ? this.orderInfo.actualBeginLat
              : this.orderInfo.beginLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: beginImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.mobilemap.add(beginAddressMap);
        //终点
        var endAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualEndLng
              ? this.orderInfo.actualEndLng
              : this.orderInfo.endLng,
            this.orderInfo.actualEndLat
              ? this.orderInfo.actualEndLat
              : this.orderInfo.endLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: endImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.mobilemap.add(endAddressMap);
      } else {
        // let valuearr = [];
        // valuearr.push([this.orderInfo.beginLng, this.orderInfo.beginLat]);
        this.mobilemap = new AMap.Map("mobileMap", {
          resizeEnable: true,
          center: val[0],
          zoom: 6,
        });
        let _this = this;
        AMap.plugin(["AMap.ToolBar"], function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          _this.mobilemap.addControl(
            new AMap.ToolBar({
              // 简易缩放模式，默认为 false
              liteStyle: true,
            })
          );
        });

        //起点
        var beginAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualBeginLng
              ? this.orderInfo.actualBeginLng
              : this.orderInfo.beginLng,
            this.orderInfo.actualBeginLat
              ? this.orderInfo.actualBeginLat
              : this.orderInfo.beginLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: beginImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.mobilemap.add(beginAddressMap);
        //终点
        var endAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualEndLng
              ? this.orderInfo.actualEndLng
              : this.orderInfo.endLng,
            this.orderInfo.actualEndLat
              ? this.orderInfo.actualEndLat
              : this.orderInfo.endLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: endImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.mobilemap.add(endAddressMap);
        this.mobileNum = 0;
        this.mobileNewnum = 20;
        this.mobileGeocoding(this.mobileNum, this.mobileNewnum);
        AMapUI.load(
          ["ui/misc/PathSimplifier", "lib/$"],
          function (PathSimplifier, $) {
            if (!PathSimplifier.supportCanvas) {
              alert("当前环境不支持 Canvas！");
              return;
            }
            var defaultRenderOptions = {
              renderAllPointsIfNumberBelow: -1, //绘制路线节点，如不需要可设置为-1
              pathLineStyle: {
                //路线样式设置
                lineWidth: 2,
                strokeStyle: "#3CB371",
                borderWidth: 1,
                borderStyle: "#eeeeee",
                dirArrowStyle: false,
              },
              startPointStyle: {
                //起点
                radius: 8,
                fillStyle: "#3CB371",
                lineWidth: 2,
                strokeStyle: "#eeeeee",
              },
              endPointStyle: {
                //终点
                radius: 8,
                fillStyle: "#3CB371",
                lineWidth: 2,
                strokeStyle: "#eeeeee",
              },
            };
            var pathSimplifierIns = new PathSimplifier({
              zIndex: 100,
              //autoSetFitView:false,
              map: _this.mobilemap, //所属的地图实例
              getPath: function (pathData, pathIndex) {
                return pathData.path;
              },
              getHoverTitle: function (pathData, pathIndex, pointIndex) {
                if (pointIndex >= 0) {
                  //point
                  return (
                    pathData.name +
                    "，点：" +
                    pointIndex +
                    "/" +
                    pathData.path.length
                  );
                }
                return pathData.name + "，点数量" + pathData.path.length;
              },
              renderOptions: defaultRenderOptions,
            });
            window.pathSimplifierIns = pathSimplifierIns;
            val = val.reverse();
            //设置数据
            pathSimplifierIns.setData([
              {
                name: "路线0", //设置路线的初始地
                path: val, //lineArr
              },
            ]);
            var navg1 = pathSimplifierIns.createPathNavigator(0, {
              loop: false,
              speed: 100000,
              pathNavigatorStyle: {
                //经过路径的样式
                pathLinePassedStyle: {
                  lineWidth: 6,
                  strokeStyle: "#087ec4",
                  dirArrowStyle: {
                    stepSpace: 15,
                    strokeStyle: "#FFFFFF",
                  },
                },
              },
            });
            navg1.start();
          }
        );
      }
    },
    // 手机轨迹
    mobileGeocoding(num, newnum) {
      var result = [];
      var obj = {};
      var resultArr = [];
      let mm = 60000;
      let mobileid = "";

      for (var i = 0; i < this.mobilePhoneData.length; i++) {
        this.mobilePhoneData[i].mobileid = i;

        // result.push(this.mobilePhoneData[i]);
        if (!obj[this.mobilePhoneData[i].mobileid]) {
          result.push(this.mobilePhoneData[i]);
          obj[this.mobilePhoneData[i].mobileid] = true;
        }
      }
      resultArr = result.reverse();
      // resultArr=this.mobilePhoneData.reverse();+
      resultArr.forEach((item, index) => {
        item.mark = GPS.gcj_encrypt(Number(item.lat), Number(item.lon));
      });

 
      resultArr.forEach((item, index) => {
        if (item.lon && item.lat) {
          item.xy = item.mark.lon + "," + item.mark.lat + "|";
          // item.Timess = this.getTime(item.gtm);
          let time1 = new Date(item.updateTime).valueOf() / 1000;
          if (index === resultArr.length - 1) return;
          let time2 =
            new Date(resultArr[index + 1].updateTime).valueOf() / 1000;
          let nums = 60 * 1;
          if (time1 - time2 > nums) {
            let minute = time1 - time2;
            item.parkingText = "停车: " + Math.round(minute / 60) + " 分钟";
          } else {
            item.parkingText = "";
          }
        }
      });
      let arr = [];
      this.mobileNum = num;
      this.mobileNewnum = newnum;
      for (let index = num; index < resultArr.length; index++) {
        if (index == newnum) {
          break;
        } else {
          arr[index] = resultArr[index].xy;
        }
      }
      if (num > resultArr.length) {
        this.mobileInfiniteScroll = 2;
        this.mobilTouchThe = true;
        return false;
      } else {
      }

      arr = arr.join("");
      arr = arr.slice(0, arr.length - 1);
      axios
        .get(
          "https://restapi.amap.com/v3/geocode/regeo?location=" +
            arr +
            "&key=" +
            Gaudemap +
            "&batch=" +
            true +
            " "
        )
        .then((res) => {
          if (res.info == "OK") {
            res.regeocodes.forEach((item) => {
              this.mobilePhoneTrack.push(item);
              this.mobilescrollFun = false;
              this.mobileNum = num;
              this.mobileNewnum = newnum;
            });
            for (let index = 0; index < this.mobilePhoneTrack.length; index++) {
              let item = this.mobilePhoneTrack[index];
              item.resuls = resultArr[index];
            }
          }
        })
        .catch((e) => {
          // return this.$Message.warning("地图数据编译失败");
        });
    },
    // 刷新
    refreshModal() {
      this.refreshLoading = true;
      this.boxHeight = 0;
      this.boxScrollHeight = 0;
      this.TouchThe = false;

      this.boxScrollTop = 0;
      this.boxWindowHeitht = 0;
      this.InfiniteScroll = 1;
      this.num = 0;
      this.newnum = 20;
      this.$refs.personDom.scrollTop = 0; //滑入屏幕上方的高度

      this.mobileboxScrollTop = 0;
      this.mobileboxWindowHeitht = 0;
      this.mobileboxScrollHeight = 0;
      this.mobileboxHeight = 0;
      this.mobilTouchThe = false;

      this.mobileInfiniteScroll = 1;
      this.mobileNum = 0;
      this.mobileNewnum = 20;
      this.mobilescrollFun = true;
      // this.$refs.mobilepersonDom.clientHeight = 0; //能看到的页面的高度
      // this.$refs.mobilepersonDom.scrollHeight = 0; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
      this.$refs.mobilepersonDom.scrollTop = 0; //滑入屏幕上方的高度.

      this.mobileMaplist = [];
      this.mobilePhoneTrack = [];
      if (
        this.orderInfo.orderState == "0" ||
        this.orderInfo.orderState == "1" ||
        this.orderInfo.orderState == "-1"
      ) {
        return false;
      } else {
        if (this.trajectoryMonitor == "vehicleMapName") {
          // 车辆
          getTracks({ orderId: this.$route.query.id }).then((res) => {
            this.refreshLoading = false;
            if (res.code == 200) {
            } else {
            }
            this.VehiTlerajectory = [];
            if (res.code == 500) {
              let array = [];
              this.vehicleMapShow(array, 1);
              return this.$Message.info("暂无轨迹数据 !");
            }
            if (res.result.length == 0) {
              let arr = [];
              this.vehicleMapShow(arr, 1);
              return this.$Message.info("暂无轨迹数据 !");
            }
            if (res.result.length == 0) {
              return false;
            }
            let resmlg = res.result[0].mlg;
            this.DrivingTrack = res.result;
            this.DrivingTrack.forEach((item) => {
              item.mlg = parseInt((item.mlg - resmlg) / 10);
            });

            let longitude = res.result;
            let f = longitude.length - 1;
            let val = longitude[f];
            let aval = longitude[0];
            this.carspd = parseInt(val.spd / 10);

            this.carmlg = parseInt(val.mlg - aval.mlg);
            this.modal1 = true;
            let array = [];
            let listarr = res.result;
            for (let i = 0; i < listarr.length; i++) {
              let arr = [];
              arr[0] = listarr[i].lon + "";
              arr[1] = listarr[i].lat + "";
              array.push(arr);
            }
            if (this.orderInfo.orderState >= 2) {
              this.mobileMaplist = array;
              this.vehicleMapShow(array);
              if (
                this.orderInfo.actualBeginLat
                  ? this.orderInfo.actualBeginLat
                  : this.orderInfo.beginLat != null &&
                    this.orderInfo.actualBeginLng
                  ? this.orderInfo.actualBeginLng
                  : this.orderInfo.beginLng != null
              ) {
              }
            } else {
              let arr = [];
              this.vehicleMapShow(arr, 1);
            }
          });
        } else {
          this.refreshLoading = false;
          // 手机
          getMobileTrack({ orderId: this.$route.query.id }).then((res) => {
            if (res.code == 200) {
            } else {
            }
            this.mobilePhoneList = [];
            if (res.code == 500) {
              let array = [];
              if (res.result.orderState != "0") {
                this.mobileMapShow(array, 1);
                return this.$Message.info("暂无轨迹数据 !");
              }
            }
            if (res.result.length == 0) {
              let arr = [];
              this.mobileMapShow(arr, 1);
              return this.$Message.info("暂无轨迹数据 !");
            }
            if (res.result.length == 0) {
              return false;
            }

            // let resmlg = res.result[0].mlg;
            this.mobilePhoneData = res.result;
            // this.mobilePhoneData.forEach((item) => {
            //   item.mlg = parseInt((item.mlg - resmlg) / 10);
            // });
            // let longitude = res.result;
            // let f = longitude.length - 1;
            // let val = longitude[f];
            // let aval = longitude[0];
            // this.carspd = parseInt(val.spd / 10);

            // this.carmlg = parseInt(val.mlg - aval.mlg);
            this.modal1 = true;
            let array = [];
            let listarr = res.result;
            for (let i = 0; i < listarr.length; i++) {
              let arr = [];
              if (listarr[i].lon && listarr[i].lat) {
                arr[0] = listarr[i].lon + "";
                arr[1] = listarr[i].lat + "";
                array.push(arr);
              } else {
                this.mobileMapShow(arr, 1);
              }
            }
            if (this.orderInfo.orderState >= 2) {
              this.mobileMaplist = array;
              this.mobileMapShow(array, 2);
            } else {
              let arr = [];
              this.mobileMapShow(arr, 1);
            }
          });
        }
      }
    },
    onChangeCell(val, key, index) {
      this.tableData2[index][key] = val;
    },
    onChangeCellTab3(val, key, index) {
      this.tableData3[index][key] = val;
    },
    // 订正吨位
    tranOrder() {
      this.preImgList = [];
      this.tranModal = true;
      this.yNewNumber = this.orderInfo.transGoodWeight;
      this.qNewNumber = this.orderInfo.realGoodWeight;
      this.grossNumber = this.orderInfo.grossWeight;
      this.revisedTitle = `订正吨位  ( ${this.orderInfo.driverInfoVo.nickName} ${this.orderInfo.vehicleInfoVo.vehicleNum} )`;
      if (this.orderInfo.deliveryOrderPicId) {
        this.preImgList.push({
          img: this.imgFormat(this.orderInfo.deliveryOrderPicId),
          tiem: "装货磅单 " + this.orderInfo.loadingTime,
        });
      }
      if (this.orderInfo.receiptOrderPicId) {
        this.preImgList.push({
          img: this.imgFormat(this.orderInfo.receiptOrderPicId),
          tiem: "卸货榜单 " + this.orderInfo.dischargeTime,
        });
      }
    },
    // 图片格式化
    imgFormat(val) {
      let img = "";
      if (val) {
        img = this.$baseUrl + val;
      }
      return img;
    },
    // 装货审核
    loadingReview() {
      this.documentApprovals = true;
      this.unloadings = true;
    },
    // 装货审核通过
    loadingReviewAdopt() {
      if (this.manGoodsOrderPicUrl == "") {
        return this.$Message.warning("运单中缺少人货合照");
      }
      let data = {
        orderId: this.orderInfo.id,
        billType: 1, //装货
        billState: 2, //通过
      };
      this.$Modal.confirm({
        title: "确认审核通过",
        content: "确认将该装货磅单审核通过吗？",
        loading: true,
        onOk: () => {
          this.$Modal.remove();
          documentApproval(data).then((res) => {
            if (res.code == 200) {
              this.$Message.success("审核通过");
              this.getOrderDetail();
              this.documentApprovals = false;
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    //  装货审核不通过
    loadingReviewFail() {
      this.unloadings = true;
      this.auditFailedModal = true;
      this.AuditFailedInputs = "";
      this.confirmRejection = "确认拒绝 装货磅单 吗？";
    },
    // 卸货审核
    unloadingAudit() {
      this.documentApprovals = true;
      this.unloadings = false;
    },
    // 卸货审核通过
    unloadingAuditAdopt() {
      if (this.receiptOrderPicUrl == "") {
        return this.$Message.warning("运单中缺少卸货磅单");
      }
      if (this.manCarOrderPicUrl == "") {
        return this.$Message.warning("运单中缺少人车合照");
      }
      let data = {
        orderId: this.orderInfo.id,
        billType: 2, //装货
        billState: 2, //通过
      };
      this.$Modal.confirm({
        title: "确认审核通过",
        content: "确认将该装货磅单审核通过吗？",
        loading: true,
        onOk: () => {
          this.$Modal.remove();
          documentApproval(data).then((res) => {
            if (res.code == 200) {
              this.$Message.success("审核通过");
              this.getOrderDetail();
              this.documentApprovals = false;
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    //  卸货审核不通过
    unloadingAuditFail() {
      this.unloadings = false;
      this.auditFailedModal = true;
      this.AuditFailedInputs = "";
      this.confirmRejection = "确认拒绝 卸货磅单 吗？";
    },
    // 审核不通过
    poundListFailed() {
      if (this.AuditFailedInputs == "") {
        return this.$Message.warning("请输入审核不通过原因");
      }
      let billType = "";
      if (this.unloadings) {
        billType = "1";
      } else {
        billType = "2";
      }
      let data = {
        orderId: this.orderInfo.id,
        billType: billType, //装货
        billState: 3, //通过
        reason: this.AuditFailedInputs,
      };
      this.loadingbut = true;
      documentApproval(data).then((res) => {
        if (res.code == 200) {
          this.loadingbut = false;
          this.$Message.success("审核拒绝");
          this.getOrderDetail();
          this.documentApprovals = false;
          this.auditFailedModal = false;
          this.documentApprovals = false;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 货源审核不通过确认弹框
    AuditRejectDetermine() {
      if (this.AuditFailedInput == "") {
        this.$Message.warning("请输入审核不通过原因");
        return false;
      }
      this.loadingbut = true;
      let data = {
        goodId: this.OwnerInformationData.goodId,
        status: 1, //1拒接2
        reason: this.AuditFailedInput, //原因
      };
      // toExamineGoods(data).then((res) => {
      //   if (res.code == 200) {
      //     this.$Message.success("操作成功");
      //     this.AuditFailedModal = false;
      //     this.init();
      //   } else {
      //     this.$Message.error(res.message);
      //   }
      //   this.loadingbut = false;
      // });
    },
    showPic(v) {
      let image = new Image();
      if (v == 1) {
        image.src = this.deliveryOrderPicUrl;
      } else if (v == 2) {
        image.src = this.receiptOrderPicUrl;
      } else if (v == 3) {
        image.src = this.manCarOrderPicUrl;
      } else {
        image.src = this.manGoodsOrderPicUrl;
      }
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
    },
    showPics(v) {
      let image = new Image();
      image.src = v;
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
    },

    // 修改装载吨数
    modifyTranClick() {
      this.tranLoading = true;
      const params = {
        orderId: this.orderInfo.id,
        transGoodWeight: this.yNewNumber,
        realGoodWeight: this.qNewNumber,
      };
      uploadOrderInfo(params).then((res) => {
        this.tranLoading = false;
        if (res.code == 200) {
          this.$Message.success("订正成功");
          this.getOrderDetail();
          this.tranModal = false;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 修改订正装载吨数
    loadWeight(val) {
      if (this.showRevised == "argoOwner") {
        // 货主
        // 货损价格
        this.formRevised.damageCargo =
          this.formRevised.transGoodWeight -
          this.formRevised.realGoodWeight -
          this.orderInfo.cargoDamage;
        this.formRevised.damageCargo =
          this.formRevised.damageCargo * this.orderInfo.goodsUnitPrice;
        if (this.formRevised.damageCargo > 0) {
          this.formRevised.damageCargo = parseInt(
            this.formRevised.damageCargo.toFixed(2)
          );
        } else {
          this.formRevised.damageCargo = 0;
        }
        // 应结运费
        this.formRevised.sfreightFee =
          this.formRevised.damageCargo + this.formRevised.amount;
        this.formRevised.sfreightFee = this.formRevised.sfreightFee.toFixed(2);
        // 运费单价
        let price = 0;
        if (val > this.formRevised.realGoodWeight) {
          price = parseInt(this.formRevised.realGoodWeight);
        } else {
          price = parseInt(val);
        }
        this.formRevised.platformUnitPrice =
          this.formRevised.sfreightFee / price;
        this.formRevised.platformUnitPrice = this.formRevised.platformUnitPrice;
        if (this.formRevised.platformUnitPrice > 0) {
        } else {
          this.formRevised.platformUnitPrice = 0;
        }
      } else {
        // 驾驶员
        // 货损价格
        this.formRevised.driverDamageCargo =
          this.formRevised.transGoodWeight -
          this.formRevised.realGoodWeight -
          this.orderInfo.cargoDamage;

        this.formRevised.driverDamageCargo =
          this.formRevised.driverDamageCargo * this.orderInfo.goodsUnitPrice;
        if (this.formRevised.driverDamageCargo > 0) {
          this.formRevised.driverDamageCargo = parseInt(
            this.formRevised.driverDamageCargo.toFixed(2)
          );
        } else {
          this.formRevised.driverDamageCargo = 0;
        }
        // 应结运费
        this.formRevised.driverSfreightFee =
          parseInt(this.formRevised.driverDamageCargo) +
          parseInt(this.formRevised.driverAmount);
        this.formRevised.driverSfreightFee =
          this.formRevised.driverSfreightFee.toFixed(2);
        // 运费单价
        let price = 0;
        if (val > this.formRevised.realGoodWeight) {
          price = parseInt(this.formRevised.realGoodWeight);
        } else {
          price = parseInt(val);
        }
        this.formRevised.driverUnitPrice =
          this.formRevised.driverSfreightFee / price;
        this.formRevised.driverUnitPrice =
          this.formRevised.driverUnitPrice.toFixed(2);
        if (this.formRevised.driverUnitPrice > 0) {
        } else {
          this.formRevised.driverUnitPrice = 0;
        }
      }
    },
    // 修改订正签收吨数
    signWeight(val) {
      if (this.showRevised == "argoOwner") {
        // 货主
        // 货损价格
        this.formRevised.damageCargo =
          this.formRevised.transGoodWeight -
          this.formRevised.realGoodWeight -
          this.orderInfo.cargoDamage;
        this.formRevised.damageCargo =
          this.formRevised.damageCargo * this.orderInfo.goodsUnitPrice;
        if (this.formRevised.damageCargo > 0) {
          this.formRevised.damageCargo = parseInt(
            this.formRevised.damageCargo.toFixed(2)
          );
        } else {
          this.formRevised.damageCargo = 0;
        }
        // 应结运费
        this.formRevised.sfreightFee =
          this.formRevised.damageCargo + this.formRevised.amount;
        this.formRevised.sfreightFee = this.formRevised.sfreightFee.toFixed(2);
        // 运费单价
        let price = 0;
        if (val > this.formRevised.realGoodWeight) {
          price = parseInt(this.formRevised.realGoodWeight);
        } else {
          price = parseInt(val);
        }
        this.formRevised.platformUnitPrice =
          this.formRevised.sfreightFee / price;
        this.formRevised.platformUnitPrice = this.formRevised.platformUnitPrice;
        if (this.formRevised.platformUnitPrice > 0) {
        } else {
          this.formRevised.platformUnitPrice = 0;
        }
      } else {
        // 驾驶员
        // 货损价格
        this.formRevised.driverDamageCargo =
          this.formRevised.transGoodWeight -
          this.formRevised.realGoodWeight -
          this.orderInfo.cargoDamage;

        this.formRevised.driverDamageCargo =
          this.formRevised.driverDamageCargo * this.orderInfo.goodsUnitPrice;
        if (this.formRevised.driverDamageCargo > 0) {
          this.formRevised.driverDamageCargo = parseInt(
            this.formRevised.driverDamageCargo.toFixed(2)
          );
        } else {
          this.formRevised.driverDamageCargo = 0;
        }
        // 应结运费
        this.formRevised.driverSfreightFee =
          parseInt(this.formRevised.driverDamageCargo) +
          parseInt(this.formRevised.driverAmount);
        this.formRevised.driverSfreightFee =
          this.formRevised.driverSfreightFee.toFixed(2);
        // 运费单价
        let price = 0;
        if (val > this.formRevised.realGoodWeight) {
          price = parseInt(this.formRevised.realGoodWeight);
        } else {
          price = parseInt(val);
        }
        this.formRevised.driverUnitPrice =
          this.formRevised.driverSfreightFee / price;
        this.formRevised.driverUnitPrice =
          this.formRevised.driverUnitPrice.toFixed(2);
        if (this.formRevised.driverUnitPrice > 0) {
        } else {
          this.formRevised.driverUnitPrice = 0;
        }
      }
    },
    //订正结算价弹框
    adjustSettlementPrice(row, val) {
      this.dialogVisible = false;
      this.$nextTick(() => {
        this.dialogVisible = true;
      });
      if (row.name == "托运人") {
        this.showRevised = "argoOwner";
        this.settlementTitle = "调整托运人结算价";
      } else {
        this.settlementTitle = "调整实际承运人结算价";
        this.showRevised = "";
      }
      this.tiaozhjeng();
      this.getconfigureDataList();
    },
    methodGetOrderAdjustmentList(type) {
      // 1货主2驾驶员
      if (this.$route.query.id) {
        let data = {
          orderId: this.$route.query.id,
          userType: type,
        };
        // 科目项
        getOrderAdjustmentList(data).then((res) => {
          this.settlementLoading = false;
          if (res.code == 200) {
            if (res.result.length > 0) {
              res.result.unshift({
                accountName: "科目名称",
                adjustmentAmount: "费用（元）",
              });
              this.companyList[0].list = res.result;
            } else {
              this.companyList[0].list = [];
            }
            this.$nextTick(() => {
              //在数据加载完，重新渲染表格
              this.$refs["table"].doLayout();
            });
            this.methodGetOrderAdjustmentList2(2);
          } else {
            return this.$Message.error(res.message);
          }
        });
      }
    },
    expandChange(expandedRows, expanded) {},
    // 科目项
    methodGetOrderAdjustmentList2(type) {
      // 1货主2驾驶员
      let data = {
        orderId: this.$route.query.id,
        userType: type,
      };
      getOrderAdjustmentList(data).then((res) => {
        this.settlementLoading = false;
        if (res.code == 200) {
          if (res.result.length > 0) {
            res.result.unshift({
              accountName: "科目名称",
              adjustmentAmount: "费用（元）",
            });
            this.driverList[0].list = res.result;
          } else {
            this.driverList[0].list = [];
          }
          this.$nextTick(() => {
            //在数据加载完，重新渲染表格
            this.$refs["table"].doLayout();
          });
        } else {
          return this.$Message.error(res.message);
        }
      });
    },
    // 订正结算价
    editSettlement() {
      this.formRevised.adjustment = Number(this.formRevised.adjustment);
      this.$refs.formRevised.validate((valid) => {
        if (valid) {
          let data = {};
          if (this.showRevised == "argoOwner") {
            data = {
              orderId: this.$route.query.id,
              transGoodWeight: this.formRevised.transGoodWeight,
              realGoodWeight: this.formRevised.realGoodWeight,
              driverUnitPrice: this.formRevised.driverUnitPrice,
              platformUnitPrice: this.formRevised.platformUnitPrice,
              cargoDamage: this.formRevised.damageCargo, //货损
              shouldKnot: this.formRevised.rfreightFee, //实际结算运费
              solidKnot: this.formRevised.amount, //结算金额
              types: "1",
              cargoOwnerAdjustment: this.formRevised.cargoOwnerAdjustment,
              cargoOwnerAddReduce: this.shipperDisabledGroup,
              cargoOwnerAdjustmentremarks: this.shippertTremarks,
            };
          } else {
            data = {
              orderId: this.$route.query.id,
              transGoodWeight: this.formRevised.transGoodWeight,
              realGoodWeight: this.formRevised.realGoodWeight,
              driverUnitPrice: this.formRevised.driverUnitPrice,
              platformUnitPrice: this.formRevised.platformUnitPrice,
              oilcostCargo: this.formRevised.oilcostCargo,
              etcCargo: this.formRevised.etcCargo,
              adjustment: this.formRevised.adjustment,
              cargoDamage: this.formRevised.driverDamageCargo,
              shouldKnot: this.formRevised.driverRfreightFee,
              solidKnot: this.formRevised.driverAmount,
              adjustment: this.formRevised.adjustment,
              addReduce: this.disabledGroup,
              adjustmentremarks: this.adjustmentremarks,
              types: "2",
            };
          }
          this.settlementLoading = true;

          updateStatisticsDetails(data).then((res) => {
            this.settlementLoading = false;
            if (res.code == 200) {
              this.settlementModal = false;
              this.$Message.success("修改成功");
              this.getOrderDetail();
            } else {
              return this.$Message.error(res.message);
            }
          });
        }
      });
    },
    cancelMap() {
      this.modal1 = false;
    },
  },
};
</script>

<style>
.box {
  margin-top: 15px;
  /* border-bottom: 1px solid #eee; */
  margin-bottom: 5px;
}
.el-descriptions__header {
  margin-bottom: 15px;
}
#pickerBoxadd {
position: absolute;
  z-index: 99999;
  top: 0px;
  right: 50px !important;
  height: 290px !important;
  /* width: 300px; */
  overflow: auto;
}

#pickerInputthree {
  width: 200px;
  padding: 5px 5px;
}
.amap-ui-poi-picker-sugg-container {
  max-height: 200px !important;
}
.beginProvinceNamecss {
  width: 200px;
}
.transGoodWeightsize {
  font-weight: 800;
}
.uploadimg {
  padding: 5px 9px 5px;
  height: 130px;
}
.boximg {
  display: flex;
  border: 1px solid #eee;
  height: 130px;
}
#cardhgth {
  height: 50%;
}

.uploadimgss {
  margin-top: 10px;
  display: flex;
}
.demo-uploadcss {
  margin-top: -50px;
  width: 100px;
  height: 5px;
}
.Weight-content {
  background: #fde2e2;
}
.Weight-label {
  background: #fde2e2;
}
</style>
<style lang="less"  scoped>
.check {
  &::before {
    content: "*";
    display: inline-block;
    margin-right: 2px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #ed4014;
  }
}
.person {
  // height:359px;
  height: 400px;
  overflow-y: scroll;
}
.mobileperson {
  // height: 359px;
  height: 400px;
  // overflow-y: scroll;
  overflow: scroll;
}
.MapShow {
  height: 400px;
  margin-left: 25px;
}
.mobilMapShow {
  height: 400px;
  margin-left: 25px;
}

.hover {
  color: #ffa500;
}
.waybillnewcarrier {
  // margin-top: 10px;
  margin-left: 20px;
  display: flex;
  .waybilln {
    margin-top: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #eee;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .waybiInformation {
    padding: 25px 0;
    margin-left: 17px;
    .carriervehicleMapName {
      margin-left: 10px;
      color: #999999;
    }
  }
  .waybiInf-company {
    margin-top: 10px;
    cursor: pointer;
  }
}
.carrier {
  position: relative;
  top: -10px;
  left: 50px;
  font-size: 14px;
  font-weight: 600;
}
.drivercarrier {
  position: relative;
  top: -10px;
  left: 40px;
  font-size: 14px;
  font-weight: 600;
}
.waybillName {
  position: absolute;
  top: 109px;
  left: 42px;
  font-size: 14px;
  font-weight: 600;
}
.deeltesWays {
  width: 65px;
  background-color: rgb(70, 136, 71);
  color: #fff;
  padding: 2px 0;
  text-align: center;
  font-size: 12px;
  margin-left: 9px;
  border-radius: 3px;
  display: inline-block;
  height: 22px;
  margin-bottom: -8px;
}
.dertiemWaybill {
  padding-top: 35px;
  margin-right: 15px;
  .implementedWay,
  .AuditFailedWay,
  .quotationWay,
  .deeltesWay,
  .signFor {
    width: 65px;
    margin-bottom: 10px;
    // background-color: rgb(70, 136, 71);
    color: #fff;
    padding: 2px 0;
    text-align: center;
    font-size: 12px;
    margin-left: 9px;
    border-radius: 3px;
    display: inline-block;
  }
}

.signFor {
  background-color: #468847;
}
.AuditFailedWay {
  // width: 65px !important;
  background-color: #ff8700;
}
.implementedWay {
  background-color: #2d8cf0;
}
.deeltesWay {
  background-color: #d3d3d3;
}
.Line {
  // border-bottom: 1px solid #eee;
  // border-bottom-color: rgb(255, 255, 255);
  border: 0;
  border-top: 1px solid #eee;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(238, 238, 238);
  border-bottom: 1px solid #fff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 255, 255);
  margin: 20px 0;
}
.carrieright {
  margin-left: -150px;
}
.urgent,
.normal {
  width: 50px;
  margin-bottom: 10px;
  background-color: #dc143c;
  color: #fff;
  // line-height: 55px;
  padding: 2px 0;
  text-align: center;
  font-size: 12px;
  margin-left: 15px;
  border-radius: 3px;
  display: inline-block;
  // margin-left: 31px;
}
.normal {
  background-color: rgb(70, 136, 71);
}
.positionS {
  width: 50px;
  margin-bottom: 10px;
  padding: 2px 0;
  text-align: center;
  font-size: 12px;
  margin-left: 15px;
  border-radius: 3px;
  display: inline-block;
}
.lInsuoad {
  margin-top: -10px;
  display: flex;
  .upledDais {
    margin-left: 10px;
  }
}
.lInsugScarry {
  position: relative;
  top: 17px;
  left: 0px;
}
.demo-upload-list-waybill {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
  margin-top: 20px;
}
.demo-upload-list-waybill img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-waybill-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list-waybill:hover .demo-upload-list-waybill-cover {
  display: block;
}
.demo-upload-list-waybill-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.border_card {
  margin: 5px 0;
  border: 1px solid #a9a9a9;
}
.replyinptu {
  textarea.ivu-input {
    border: 1px solid transparent;
    outline: none;
    border: none;
    box-shadow: 0 0 0 2px transparent;
    // border-bottom: 1.3px solid gainsboro;
  }
}
.trajectory {
  font-size: 16px;
  font-weight: 700;
  margin-top: 15px;
}
.refreshButme {
  position: relative;
  top: 8px;
  right: 5px;
  border: 1px solid #eee;
  border-radius: 5px;
  z-index: 9999;
  cursor: pointer;
}
.ivu-tabs-nav .ivu-tabs-tab {
  position: relative;
  top: 10px;
  left: 5px;
}
.my-content {
  width: 150px;
}
.my-limitation {
  width: 170px;
}
.ontain {
  height: 220px;
  overflow-y: scroll;
}
.listItem {
  padding: 7px;
  font-size: 14px;
  border-bottom: 1px #333 dotted;
  width: 99%;
}
.NotFilled {
  font-size: 14px;
  color: #a9a9a9;
}
.driverDiptions {
  width: 100px;
  height: 43px;
  text-align: center;
  line-height: 43px;
  color: #606266;
  border: 1px solid #ebeef5;
  background-color: #fff;
}
.driverBtn {
  width: 80px;
  height: 43px;
  text-align: center;
  line-height: 43px;
  color: #606266;
  background-color: #2d8cf0;
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.table table {
  // table-layout: auto;
  width: 100% !important;
}
.popover-Tags {
  margin-top: 3px;
}
.PresenceAnd {
  height: 25px;
  padding-top: 2px;
}
.carrlistMomoney {
  margin-left: 10px;
  font-weight: 600;
}
.cancellation {
  color: red;
}
.waiting_div {
  margin: 10px 0;
  .div_title {
    font-size: 14px;
  }
  .div_nr {
    font-size: 14px;
    margin-left: 15px;
    font-weight: 600;
  }
}
.div_Select {
  margin-left: 13px;
}
.bixz {
  margin-left: 24px;
}
.modifyTonnage {
  width: 50%;
}
.viewer-img-title {
  height: 30px;
  background-color: #f8f8f9;
  padding: 5px;
  // border-radius: 7px;
  font-weight: 600;
  // position: absolute;
  left: 16px;
}
.expand-row {
  margin-bottom: 16px;
}
.viewer-container {
  z-index: 9999 !important;
}
</style>
<style>
.el-table .warning-row {
  background: rgb(245, 245, 245);
}

.el-table .success-row {
  background: #f0f9eb !important;
}
.item-box {
  display: flex;
  border-bottom: 1px solid #eee;
  padding-left: 30px;
  padding-bottom: 10px;
  padding-top: 10px;
}
.item-titles {
  width: 10%;
  font-size: 14px;
  font-weight: 600;
  margin-left: 20px;
}
.item-texts {
  margin-left: 30px;
}
.expand-css {
  width: 100%;
  display: flex;

  overflow: auto;
}
.expand-items {
  width: 150px;
  text-align: center;
}
.items-name {
  height: 48px;
  line-height: 48px;
  border-right: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
.items-bgc {
  background: rgb(245, 245, 245);
}
.items-yun {
  height: 48px;
  line-height: 48px;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
.marg-top {
  margin-top: 20px;
}
.table-Tile {
  font-weight: 600;
  margin-bottom: 20px;
  z-index: 9999;
}
.dips {
  display: flex;
  justify-content: space-between;
}
.imgboxele {
  width: 600px;
  height: 450px;
  object-fit: scale-down;
  /* object-fit: cover; */
  /* flex: 1; */
}

.mal {
  width: 600px;
  height: 90%;
  margin-left: 60px;
  cursor: pointer;
}
.mal1 {
  width: 600px;
  height: 90%;
  margin-left: 120px;
  cursor: pointer;
}
.frueshe-css {
  margin-top: 20px;
  font-size: 20px;
}
.imgpod {
  margin-top: 58px;
  width: 50%;
  height: 100%;
  padding: 20px 0;
}
.ReasonsFailureAudit {
  color: red;
}
</style>